How to Create a Website with Google Sheets for Free

Honestly, I can’t believe my eyes, and I have to share what I just found out with you.  I recently stumbled across a service that I can use to power websites, apps or whatever else I want – all with a simple Google Sheet. This service is called Sheety, which I found on Product Hunt. In short, Sheety allows you to create a website with any Google Sheet and instantly turn it into an API – all for free.

Why build a website with Google Sheets

You’re probably wondering why you should build a website with Google Sheets when there are numerous services out there like WordPress.

And that’s a fair question. So let’s break it down: the idea behind Sheety and comparable tools is definitely not to replace services like WordPress as they are irreplaceable. That said, let’s briefly go over some benefits of building a website with Google Sheets, so you can decide if this is the tool for your project.

  • Google Sheet is basically a spreadsheet – and it’s free.
  • Almost anyone knows how to create/update a spreadsheet.
  • Spreadsheets can be easily stored and backed up.
  • Good for creating a quick and free personal site.
  • Suitable for rapid website prototyping.
  • Ideal for building a newsletter list.
  • No need to export/import your spreadsheets data.

Which service should I use?

As mentioned before, Sheety is one of these available services. There are alternatives to Sheety ranging from free to premium to help you to create your website.

For the purpose of this article, let’s use the Sheety service which is free yet powerful.

Sheety – turn your Google Sheet into an API

The Sheety service turns any Google Sheets into an API, so you can fetch your data in any website. Before getting the ball rolling, it’s a good idea to read the following articles to get more familiar with this service.

How to create a simple portfolio website with Google Sheets

Because nearly everyone needs a way to show off their work, portfolios are one of the most popular types of website. So then let’s create a simple portfolio website like the one you see below.

You can see the final live version on CodePen.

create a website with Google Sheets

Prepare a Google Sheet

1. Create a new Google Sheet, then add two sheets called Meta and Items.

create a website with Google Sheets

2. In the Meta sheet, add the Title, Read more and Footer data as shown below.

create a website with Google Sheets

3. In the Items sheet, add Title, Description, Tags and Screenshot columns as shown below. These columns will function as dummy data to populate the portfolio items.

create a website with Google Sheets

Connect the Google Sheet to Sheety

1. Sign into Sheety with your Gmail login information.
2. Add a new project, then set Project Name to Portfolio and Spreadsheet URL to your Google sheet and click on the Create button.

create a website with Google Sheets

3. Click on the Sync button to generate the API endpoints. After doing so, you should be able to see the Meta and Items endpoints.

create a website with Google Sheets

Prepare the website

For this article, I used the CodePen website. You can use any other services or create your own HTML in your local host.

1. Create a pen in CodePen and call it Sheety Portfolio.
2. Add Tailwind CSS framework. This is used to quickly create a visually appealing layout.

https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css

3. Add the Vue.js framework and Axios library, which are used to fetch data from API and populate the HTML properly.

https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js
https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

4. Copy and paste the HTML and JS from this pen to your pen. There’s no need to explain the HTML and JS codes here since it’s outside the scope of this article. However, I did add some comments in the codes to help you understand the codes.

create a website with Google Sheets

5. Now, you should be able to see a website like in the first screenshot. From now on, as soon as you update your Google Sheet and refresh your pen, the new data will be automatically shown.

Conclusion

All-in-all, I’m glad that I found this Sheety website and shared this service with you. In this article, we first learned about a cool service to create a website with Google Sheets. Secondly, we created a simple websites to grasp the potential of these services.

It’d be cool to share your websites powered by Google Sheets with us in the comment section below.

How to Create a Community Poll Website with Jupiter X – Part 1

Recently, I was about to build an online community where users could create their own polls and share them on their social networks. Search results show that there are plenty of community poll platforms out there but none of them were what I actually needed. I wanted to create a community poll website that is:

  1. Cheap or free of charge
  2. Actively maintained and updatable
  3. Independent and installable on shared hostings
  4. Customizable with a minimum amount of coding
  5. Community based, meaning that the community of users should populate it with their content
  6. Loaded with a function that allows users to share the polls in their social networks
  7. Fully responsive and adaptable to mobile devices

After digging a lot and testing dozens of demos, I realized each platform lacks one of my requirements or the other. Then suddenly an idea popped into my mind: why not build up the community using WordPress? We recently moved our support platform to a community built by WordPress, BBpress and Jupiter X, which is working quite well.

Then why not build another community using the same tools? So then I thought that BBPress is a community builder and probably has tools I can customize to achieve what I want. The more I looked, the more I realized that it’s exactly what I want.

  1. It uses WordPress, which is free. The BBPress is also free.
  2. Both BBPress and WordPress are actively maintained.
  3. I can install both of them on any shared hostings.
  4. I can customize everything with the minimum amount of coding.
  5. It’s where the users will create polls with their own content. It’s a community after all.
  6. It allows me to share the polls with specific permalinks wherever I want.
  7. By using Jupiter X, it’ll be fully responsive and customizable.

So, I decided to give it a try and start building up my community using the tools I’ve got. The BBPress and WordPress definitely were not enough, and I needed more. Fortunately, nearly all of them were available, and I was able to easily access and use them.

In this article, I’m going to share my experience of creating a community poll website on a budget.

Defining the UX

More than anything, I wanted the website to be mobile friendly. I thought that maybe later I would want  to wrap the whole website into a webview and publish it for Android or iOS. This meant that I needed to consider everything to be fully responsive and think mobile first. I wanted something like the following:

Wireframe of the online community poll website

I also wanted the poll single pages to be something like this:

So, the experience would be like:

  • Viewers will enter the website and see the content and announcements that they need to register and login to vote and participate in the discussions below each poll. 
  • The registration will be completed as quickly as possible and without any unnecessary steps after clicking on the registration or login button on top.
  • After registration, the logged-in user will be redirected back to the page they were on before.
  • Voting and commenting under the votes are visible now after logging in
  • If user got back to the homepage, he can use Ajax search and filters to find an interesting poll and participate
  • The poll list in the homepage is showing the voted polls and not voted with a different color
  • After participating in each poll, whether the user votes on it or added a comment under it, it should send a notification to the user who created the poll.

Also, users have their own profile and clicking on the user name will navigate you to the user profile where you can see the user details, avatar and cover image, created polls, comments, favorite and followed polls. I didn’t want to create membership plans to monetize the website, but it should be possible to do it easily in future. 

So, things got complicated, huh? Don’t worry. We will get through this and see how we can do it step by step.

Prepare the tools

Creating a community poll website required two major functionalities:

  • Community
  • Membership profiles

I chose these two plugins that are absolutely free and popular among users:

Each of these plugins can extend their functionalities using add-ons. So I needed the following:

  • The GD Topic Polls for BBPress plugin makes it possible for the users to create polls.
  • The Real-time notifications for Ultimate Member plugin allows users to receive notifications whenever something happens (premium plugin).
  • GD bbPress Toolbox Pro. The only use for this plugin is to let users upload images and use the image as the poll thumbnail. While I could have developed this another way, this was the easiest solution and worth trying (premium plugin).
  • Comments – wpDiscuz is an advanced commenting plugin and adds functionality to the discussions. 
  • Optional: Digits : WordPress Mobile Number Signup and Login makes it possible to change the WordPress login and allows users to register with their phone numbers instead of emails and also verify the phone numbers using SMS (premium).
  • Jet Engine for its listing feature (premium)
  • The Jet Smart Filters plugin can be used for its advanced Ajax search and filtering features (premium).
  • The free version of Elementor can be used as the page builder
  • Raven (bundled with Jupiter X) was used for creating the custom header and footer.

I wanted to use the Jupiter X theme that already comes bundled with the Jet Engine and Jet Smart Filters. So, this means that two premium plugins were already provided for free. Also, it gave me the ability to build up my custom header and footer and visuals that I needed. So, I would definitely consider this theme as a base and choose the plugins that are compatible with it.

Creating a community poll website like this also requires some coding, which I’ll explain in the following paragraphs.

Step One: Install Jupiter X, Jet Engine and Jet Smart Filter and activate the child theme

The first step is to install Jupiter X and its bundled plugins, which provides an easy way to list the latest polls based on your design and allows you to use the smart filters to create an Ajax search. Also, since Jupiter X is a fully responsive theme, it allows you to implement the whole website to easily use as a mobile app.

After downloading the Jupiter X theme from ThemeForest, install it from Appearance -> Themes and register the product. A complete guide on how you can install and activate the theme is provided here.

Since we need to modify some files and add some customization here and there, it’s better to use a child theme to avoid change loss in the theme and plugin updates. So, right after installing the theme, you need to install and activate the Jupiter X child theme. You can find out how to do this by reading this article. It’s as simple as finding and installing the jupiterx-child.zip file inside the same package you downloaded from ThemeForest.Net.

The Jupiter X child theme package
Make sure the Jupiter X Child theme is your active theme

In order to install the bundled plugins, you need to register the theme first. So, try registering the theme like the guide provided here and make sure you can see that the theme is activated.

The Jupiter X theme is activated

Now you can install the bundled plugins. Simply navigate to Jupiter X -> Control Panel -> Plugins and install and then activate these plugins:

  • Elementor
  • Raven
  • Jet Engine
  • Jet Smart Filters
  • Advanced Custom Fields
The list of required active bundled plugins in Jupiter X for a community poll website

The Jupiter X Core plugin is mandatory, and you’ll need to install it right after installing the theme, so it’s also on the list. 

So, we are done here. Let’s move onto the next step.

Step Two: Install BBPress and its addons and configure

We’ll use BBPress as the main community builder on our website. Whenever you want your users to engage and provide content for your website and actually create a community of users, no matter what functionality you require, the BBPress is the best choice if you’re going to use a WordPress website as the backbone.

What we’re going to build with BBPress is one forum named Polls, then let the users create topics inside this forum and add a poll to their topics and publish it. Then, the other users can vote on each other’s polls and share it on their social networks. Also, we’re going to implement a notification and discussion board for each topic. So this means that the author is notified as soon as other users vote or add a comment to the poll. So, let’s start by adding the BBPress plugin.

In WordPress -> Plugins -> Add New, search for BBPress. Simply install and activate.

Activating the BBPress plugin

Now navigate to Settings -> Forums and change the Forum Root and Topic slugs to “polls” and “poll.” It’ll give you a better permalink structure for your polls as each topic means a poll on your website.

Configuring the main slugs for the forums and topics

After that, go to Forums and add a new forum to the website. This is our main forum that contains all of the polls. So, call it “Polls” again.

Adding the “Polls” forum to the website

Now that the main forum is added, we need to provide a way so our users can add their own topics that contain polls in this forum. But how can we do that? First let’s add a plugin that allows the topics to have polls inside. It’s called GD Topic Polls for BBPress

Go to Plugins -> Add New, search for it and then install and activate it.

Activating GD Topic Polls for the BBPress plugin

The next step is to create a page and add a form to it where users can create topics and polls.

Step Three: Add the “Create Poll” page

We need the polls to be created by the users – but all from the front end. We don’t want them to come to the WordPress dashboard to be able to create a new poll. That’s one of the reasons we wanted to create our website using a community builder.

So, create a page and add this BBPress shortcode to it:

[bbp-topic-form forum_id=29 ]
Adding the new poll page

Remember to change the 29 with the forum ID.

Getting the forum ID for the [ bbp-topic-forms ] shortcode.

The result will be a page like this in the front end:

create a community poll website
New topic form

As you can see, the form is created and that page and the Create New Topic Poll is located at the end. Check the “Add poll to this topic” to see the poll form.

create a community poll website
Default Add New Poll form

Try sending a new poll, and see the results. You’ll be able to add as many responses as you want or choose how many responses are allowed.

create a community poll website
Submitting the topic with the poll

After submitting the form, you’ll be redirected to the topic, and you’ll be able to see the topic with the poll above that.

create a community poll website
Topic with its poll after creation

Congratulations! We’re nearly there. Before finishing, there are a few more things we need to take care of. First, I don’t want users to create a topic and then the polls. I only want Polls. So I need to somehow hide the topic or the poll title and description since I have two of them.

create a community poll website
Extra fields and notices to remove

Technically, I just need to hide the extra fields and notices. Some of them can hide via CSS and some of them can get hidden by actions. However, the easiest solution would be to use the child theme and override the BBPress and GD Polls for BBPress Topics template files in it. It’s as easy as copying/pasting the proper files and the plugin template folder to my “jupiterx-child” folder and editing them.

So, from wp-content/plugins/bbpress/templates/default/bbpress/ I’ll copy the form-topic.php to wp-content/themes/jupiterx-child/bbpress/form-topic.php and then edit its codes and remove the extra fields and notices and save the file.

I should also do the same for the poll form files that are located in wp-content/plugins/gd-bbpress-toolbox/templates/default/bbpress/ and named as

  • gdpol-poll-edit.php
  • gdpol-poll-form.php
  • gdpol-poll-new.php

So I’ll copy them to the jupiterx-child/bbpress/ folder as well.

create a community poll website
Hiding the poll title and description fields

In the gdpol-poll-form.php I commented out the poll title and description fields, and instead, created two hidden fields with constant values to fill the poll description and title. This is required since the poll will not be created if the values are empty. I’ll use the Topic title and description on the polls page.

The result is now like the following:

create a community poll website

I would like to let the users add a thumbnail to their polls as well. This thumbnail can be used in asking users’ opinions if they want to see an image before answering the poll. Adding an image to the topics are not allowed by default, so I need to find a plugin to add it or develop this part on my own.

By using the GD BBPress Toolbox Pro plugin, it’s entirely possible to attach media to the topics and assign the first attachment as the topic thumbnail. It also allows you to control the attachment for the different roles. You can control the size of the image and choose from the allowed extensions. It also provides safety and security for the user file uploads. So, I’ll use this plugin and configure it like this:

create a community poll website
Configuring the attachment settings for the BBPress topics

Also, I would like to only allow the gif, png, and jpg mime types to be uploaded. So from the top General button, I’ll choose the “Allowed Types” and then select my desired file types.

create a community poll website
Allowing certain mime types to be uploaded by the users

There is also another setting that needs to be configured. We need to make sure the attachment will be considered as the topic thumbnail. So, simply choose the “Integration” from the button above and then check the “Auto Generate Featured Image” for the Topics and save the settings.

create a community poll website

Now I’ll need to style the topic creation form a little bit and hide some fields via CSS. In order to do that, I’ll write this CSS fix in jupiterx-child/assets/less/style.less and let the Jupiter X built in compiler enque it to the website. Remember to uncomment this line in jupiterx-child/functions.php before doing that:

jupiterx_add_smart_action( ‘wp_enqueue_scripts’, ‘jupiterx_child_enqueue_scripts’, 8 );

jupiterx-child/assets/less/style.less:

#gdpol-poll-status,
#wc-comment-header,
.wc_stick_btn.wc-cta-button,
.wc_close_btn.wc-cta-button,
.bbp-form.gdpol-topic-poll-form legend,
.d4p-attachment-addfile,
a.gdbbx-attachment-add-file,
.gdbbx-attachment-control>div:nth-child(3),
.gdbbx-attachment-control>div:nth-child(4),
.wc-field-submit .wpd_label {
    display: none !important;
}

.gdpol-fields-wrapper {
    display: block !important;
    border: none !important;
}

.bbp-form .gdbbx-attachments-form .gdbbx-validation-active .gdbbx-attachment-preview {
    float: left !important;
    margin-left: 0 !important;
}

.bbp-form .gdbbx-attachments-form .gdbbx-validation-active .gdbbx-attachment-control {
    float: left;
    margin-left: 15px;
}

.gdbbx-attachments-form {
    text-align: left !important;
}

ul.gdpol-responses-list li span._button:last-of-type {
    padding-left: 4px;
    width: 38px
}

form#new-post {
    max-width: 500px;
    margin: auto;
}

input#bbp_topic_tags,
#bbp_topic_title {
    width: 100%;
}

select.gdpol-select-choices.gdpol-field-extra-select {
    width: 100% !important;
    max-width: 100%;
}

.gdpol-field.gdpol-field-regular label {
    width: 100%;
}

Now let’s take a look at our poll creation page:

create a community poll website
The poll creation page after removing extra fields and styling

Simple, clean and quick as desired. Try submitting a new topic with the attachment and watch it work.

Stay tuned for the second part of this two-part blog series as I’ll show you how to style the single topics page, add membership profiles and implement a notification system. Also, we’ll need to display a list of the polls (topics) created and add filters and search options to it and show it on the homepage.

Extend Gutenberg with Free Blocks

Released in late 2018, the WordPress Gutenberg editor is getting more and more popular by the day. By default, it has some blocks for you to kickstart creating a website, but they are far from enough to create a professional website. To do this, you’ll need to install some add-ons to access advanced blocks.In this article, we’ve included some popular, free plugins to help you extend Gutenberg with free blocks. Now let’s briefly name and introduce the plugins.

Note: It’s worth mentioning that the following statistics are relevant to when this article was written. These figures might have changed by the time you read this article.

Page Builder Gutenberg Blocks – CoBlocks

extend Gutenberg with free blocks - coblocks

CoBlocks contains an amazing archive of page building blocks to be used with the Gutenberg WordPress block editor.

One of the best features of CoBlocks is that the page builder is robust but lightweight, which means that you’ll be able to get maximum functionality without compromising on performance.

Read more about CoBlocks on WordPress.org

Specifications

Gutenberg Blocks – Ultimate Addons for Gutenberg

This add-on simplifies that website building process. It provides you with several  unique and creative blocks for Gutenberg that help you create pages or posts without writing a single line of code.

Read more about Gutenberg Blocks on WordPress.org

Specifications

  • 200,000+ active installations
  • 20 blocks
  • Frequent updates
  • 5 star rating
  • Translated to 6 languages
  • Compatible with free popular Gutenberg ready themes
  • Pre-built templates
  • Documentation and support friendly.
  • Block management to help you enable/disable the blocks.
  • Developed by Brainstorm Force.

Kadence Blocks – Gutenberg Page Builder Toolkit

extend Gutenberg with free blocks - kadence

This plugin adds custom blocks and options to extend Gutenberg’s editing capabilities so you can create custom layouts and more engaging content.

This plugin is meant to be a toolkit that makes the WordPress block editor capable of creating content usually only possible through popular page builder plugins.

Read more about Kadence Blocks on WordPress.org

Specifications

  • 50,000+ active installations
  • 12 blocks (interactive demo).
  • Frequent updates
  • 5 stars rating.
  • Translated to 3 languages.
  • Compatible with free popular Gutenberg ready themes.
  • Block management to help you enable/disable the blocks.
  • Documentation and support friendly.
  • Developed by Kadence WP.

Atomic Blocks – Gutenberg Blocks Collection

extend Gutenberg with free blocks - atomic blocks

Atomic Blocks is a collection of page building blocks for the new Gutenberg block editor.

On top of the handy, time-saving blocks already found in Atomic Blocks, this plugin has a new Section and Layout block! This block comes with a library of pre-designed sections and layouts to help you quickly and easily build a beautiful site with the new block editor.

Read more about Atomic Blocks on WordPress.org

Specifications

  • 40,000+ active installations
  • 15 blocks
  • Frequent updates
  • 4.5 stars rating.
  • Translated to 7 languages.
  • Default theme and compatible with free popular Gutenberg ready themes.
  • Pre-designed sections and layouts.
  • Documentation and support friendly.
  • Block management to help you enable/disable the blocks.

Stackable – Gutenberg Blocks

extend Gutenberg with free blocks - stackable

Stackable is one of the first and most expansive block libraries made specifically for the new WordPress Block Editor (Gutenberg).

It adds essential custom blocks to Gutenberg’s arsenal to achieve a smooth page building experience.

Read more about Stackable on WordPress.org

Specifications

  • 20,000+ active installations
  • 23 blocks (interactive demo)
  • Frequent updates
  • 5 stars rating.
  • Translated to 5 languages
  • Default theme and compatible with free popular Gutenberg ready themes.
  • Documentation and support friendly.
  • Block management to help you enable/disable the blocks.

Advanced Gutenberg

advanced gutenberg

Advanced Gutenberg adds the missing blocks and configuration you need to build professional websites.

This plugin helps you to take control of the new Gutenberg editor with a user edition profile configuration.

Read more about Advanced Gutenberg on WordPress.org

Specifications

  • 20,000+ active installations
  • 27 blocks
  • Frequent updates
  • 4.5 stars rating.
  • Translated to 3 languages
  • Compatible with free popular Gutenberg ready themes.
  • Documentation and support friendly.
  • Block management to help you enable/disable the blocks.

Conclusion

In this article, we did our homework and briefly presented some helpful plugins to extend Gutenberg with free blocks. Gutenberg is becoming more and more popular in the WordPress community, which will lead to the development of more add-ons.

Feel free to share your favorite Gutenberg add-on with us in the comments.

Key Elements for Creating a Financial Website

Creating a great website is a challenge in and of itself. No matter what your business is, you need to find ways to make the site interesting so you can attract visitors. This is particularly true for the financial sector, which encompasses numerous businesses and services – such as startups, private firms, small businesses, investment firms, financial advisors and more. If you’re worried about the features that you should include in your finance website, we’re here to help you! In this blog post, we’ve gone ahead and listed some key elements that you can include for creating a financial website.

Interactive videos

It’s a fact that videos attract visitors to websites, and a good video can definitely leave a lasting impression on your visitors.  Your site should have videos that offer details of the website services, how customers can benefit by signing up among others. Ultimately, this will make your site more interesting.

Diagrams & charts

In today’s world, we’re inundated with data – more than ever before in history. In order to present all this data, we need to use text, tables or graphs while creating a financial website.

Graphs, charts and diagrams present information in a consistent and compact manner, allowing for target audiences to quickly grasp the meaning behind the data. For example, pie charts compare parts to a whole and show a percentage distribution. While the pie represents the total data set, each segment of the pie is a particular category within the whole. Many types of charts and graphs are available, which allows businesses to easily select the best way to present their information.

creating a financial website - graphs

Progress bar

Progress bars are a great way to display varying types of data and content in an easily digestible form to your viewers. This element also offers numerous options for easy customization, such as color, size, borders and the ability to choose where the relevant text will appear. If you’d like to learn more, check out the examples in Jupiter X Startup and Cryptocurrency templates.

creating a financial website - progress bar

Financial indexes

A financial index is a measure of a stock market that helps investors compare current prices with past prices to calculate market performance. This info will be very useful for your visitors, because they will be able to determine returns over time by comparing past and current index levels.

To show the indexes as in the picture, you can use the Image Box and Heading elements. Add an image and the currency name in the Image Box and the price and percent values in the Heading. Make sure to include financial indexes while creating your financial website as they will help your customers make better investment decisions.

List your clients

When someone visits your website, they should be able see your previous or current clients, which will in turn create trust. This is a great way to help ensure that visitors will contact you.  Client logos serve as social proof and is one of the easiest, most effective ways to gain customer trust. The Brands element will help you accomplish this.

creating a financial website - brands

The Brands widget enables you to display logos, as well as post the company’s name, add a description and link to their website.

So, if you’ve got clients, don’t hide them – especially if they are well-known companies. You may impress upon your visitors that if they work with you, they can achieve success equal to those companies. Jupiter X Startup template has a fantastic example of the Brands element.

Create a FAQ page

In business, time equals money, and a well-built FAQ page will save time that you would otherwise be spending in fielding emails and phone calls. Chances are that your customers will want to find more information about your businesses as well as products/service by going to your FAQ page. To create such a page, elements such as Toggle and Accordion will help you the most.

creating a financial website - FAQ

Providing information in a question and answer format is useful for customers to know what you do (and what you don’t). As a tip, keep your FAQ answers concise and include links to more in-depth information elsewhere on your site as it’s an important search ranking factor.

creating a financial website - FAQ 2

Introduce your financial experts

The visitors who come to your website will want to check out your  About Us section as well. It’s here where they’ll get a good idea about your company and whether or not the company is reliable, how long it’s been in the industry and the team.

creating a financial website - team

To easily create an About Us page, we recommend using the Team Member element which has been added to the Crypto Currency template. Don’t hide faces – be more friendly to your potential customers!

Tabs

Tabs divide content into meaningful sections, which then in turn occupies less screen space. In this way, users can easily access the content that they are interested in (rather than sifting through all the content in paragraphs).

Tabs can also improve the visual aspect of a website. Due to their functionality, it’s very hard for users to miss them. Note that if you’re going to use tabs for navigation purposes, it’s best to place them in the top part of your web page – which is where users expect to find them.

Tab labels should be written in plain language. This makes it easier for users to scan and to predict the type of content for each tab. To see how the tabs may look on your site, check out Jupiter X Cryptocurrency template.

Testimonials

Displaying testimonials on your website is a great way to show that previous customers have been satisfied with your services and offerings.

creating a financial website - testimonial

Here are some statistics about testimonials to keep in mind while creating a financial website:
92% of consumers say they read testimonials and customer reviews when deciding to make a purchase

72% of consumers trust businesses more if they’ve read positive testimonials about those businesses

88% of consumers trust these testimonials just as much as a personal recommendation.So, find your top testimonials, and add them to your homepage. Don’t post only text (it’s boring). Add photos and write who the customer is and what they do. A similar example is shown in the Startup template of Jupiter X theme.

Contact Form

If you run a business, it’s important for customers to be able to contact you easily, whether they want to buy a product, sign-up for something or ask questions. Contact forms give your users the impression that you are available. Even though you can’t be available 24/7, you want to provide a way for visitors to contact you. Contact forms let you do just that.

You may need to collect some extra information from your visitors. With the Form element, you can easily require details such as their phone number or what product or service they’re looking for.

creating a financial website - contact

The best way to do this while creating a financial website is to make a Contact Us page and add a contact form that can be easily accessed.

Flip box

With the flip box, you can design your offers or discounts with animation effects both for back and front content separately. You can style your services or packages with flip effects to remove the monotonous representation of content. The element that can give you such an effect is the Animated Box.

creating a financial website - flipbox

The Font Awesome icons are integrated there. You can put a title on the front and backside, add buttons to your content and the box height will extend based on the amount of content you use. You can also customize the background on the front and back side, the flip effect, the flip direction, the flip duration, the border size, the border radius and have full control over the front and backside colors.

The Animated Box not only adds dynamic style to your site but also saves some space to represent the products, services or any other important documents. The content styled with the Animated Box will immediately draw your visitors’ attention. You can find some examples of flip boxes in Jupiter X Eileithyia and Startup templates.

Wrapping up

We hope these tips will be very helpful for you and the aforementioned elements will further streamline creating your financial website.

There are other elements you can use, and you can find them in the finance templates for Jupiter X. If you think some elements are missing in the above list, feel free to share your ideas and experience with any other elements.

How to Speed Up your Website in Jupiter X

Speed up your website - Featured image

No one likes slow websites. Even search engines don’t like them and push them down the list of the search results. But how can we make a super-fast website? What if you’re using the Jupiter X theme? Truth be told, a theme is only one factor in the field of performance. While having a lightweight and fast theme is important, the content and how you represent it plays a larger role.  In this article, we’ll provide you with an overview of how you can speed up your website in Jupiter X.

Test your site’s performance score in GTMetrix

Before anything, you need some metrics to measure your performance score. GTMetrix is a well-known performance scanner that also recommends what to do to get a better score.

It measures the PageSpeed Score and YSlow Scores with numbers between 0 to 100. The higher the score, the faster your website. Make sure to keep your results somewhere as you’ll need them to compare at every step you take to see whether or not you’re on the right path.

You can also test your site’s performance with Pingdom and Google Page Speed Insights, but GTMetrix is the most accurate.

speed up your website in jupiter x recipes 3 perfromance
The performance report for the Jupiter X Recipes 3 template on GTMetrix.com

How to find out what’s causing poor performance

Poor performance can stem from two things: 

  • Client side performance issues
  • Server side long execution times

You can check the client side issues using a Chrome browser and observing the network tab while the page loads. We suggest that you do this in incognito mode or while logged out because some plugins may increase the loading time while logged in. You can sort the resource loading time on and see the worse performant resources and check the other details to see what you can do to improve it.

If a resource had a long TTFB (time to first byte), it means that it’s a server side issue. A long TTFB actually happens when the server is executing something before sending the result to you as a client.

One of the Jupiter X templates network tab results in Google Chrome

You can also find a lot of other useful information here in the network tab, which provides information like the server response code or you can check if the resource is already cached or not, among other issues. More information about the network tab and the tools to analyze the performance is provided here.

Remember that you can also use A/B testing to analyze the performance using the same tab. If you believe that a resource is causing performance glitches, you can remove the resource and then test it again to compare with the previous results. Here you can find more information on how to do that.

Now if signs point to the server as the cause of performance issues, then you should take more into consideration.

Understanding a page life cycle will be a great help here. When a web page is being requested by a client, it will take the following general steps to generate a result and being sent back to the client:

  1. The request is sent to a DNS server where it resolves the IP addresses and passes it over to your server. 
  2. The server receives the request and passes it to the web server. 
  3. The web server handles the request based on predefined mime/types and file extensions and finds the proper file path and starts executing it with the help of a compiler or script interpreter. 
  4. While executing, it may continuously fetch some data from the Database Server. (MySQL or MariaDB most of the time if it’s a WordPress website)
  5. The interpreter will generate a page based on the user request and send it back to the web server. 
  6. The web server will send the page to the client and client will render it using a web browser.

Each of the above steps is taken by one or a couple of tools. The request execution part is when a theme or plugin takes part and finding the reason for any performance bottlenecks is possible using Debug Bar, Debug Bar: Slow Actions and Query Monitor plugins. Generally, using these plugins will give you information about the hooks that are causing most performance issues, the queries that are taking more time to execute and actions and filters that are increasing the execution time.

Take note that  although they are great plugins when it comes to debugging performance issues on your website, they will increase the loading time. So, make sure to deactivate them when you don’t need them anymore.

We’ll now discuss and provide some improvement tips for the sake of performance while you are using the Jupiter X theme to develop your WordPress website.

Disable Development Mode in Jupiter X

One way to speed up your website in Jupiter X is by disabling Development Mode. This is because using Development Mode in Jupiter X will cause the Less compiler to run every time you request to load the website. It will indeed increase your loading time. So, if you are set with the development already, simply disable Development Mode in Jupiter X -> Control Panel -> Settings.

Deactivating Development Mode in Jupiter X

Disable Cache Busting

Cache Busting is a method to make sure that the changes you have made on a page or customizer setting won’t get behind a cached version of the static assets, meaning that it won’t be visible for the users. Jupiter X generates a different name for the compiled assets each time you save a change somewhere. Because of this, the static assets will not be cached after making a change. If you don’t want to change the color, typography or anything related to the theme for a while, it’s better to disable Cache Busting to make sure users benefit from the cached version of the static files.

Disabling the Cache Busting option in Jupiter X

Avoid using tons of plugins

One thing to keep in mind when looking to speed up your website in Jupiter X – or any website for that matter – is plugins. Technically speaking, using many activated plugins will cause a drastic performance drop in your TTFB. Each plugin has a different method in its development process. While executing some tasks are heavy by default, it’s not like all the plugins are optimized and performant.

If you’re trying to introduce a small feature onto your website and it’s available on a multipurpose plugin, it’s better to write it on your own or find an alternative. Generally, using a lot of plugins means you need more resources to handle page generation requests. So, keep them deactivated as much as possible. More information can be found here.

Use a caching plugin

Each time a client sends a request to a server, the server should generate the page and send it back to the client. But, what if the server saves the page that is being requested once and avoids creating it again to save some resources? This is exactly what a caching plugin provides. Even Artbees uses caching plugins to save resources and speed up the loading process on its demo templates.

For Jupiter X, we recommend choosing between these plugins:

  • Autoptimize
  • WP Rocket (premium)
  • WP Fastest Cache

While using any caching plugins, you should avoid deferring the JS because it will break the theme. On the other hand, you can use the JS minification and combine all of the JS or CSS files into one. But you should consider one exception only: the web font loader should be excluded from the minification and works stand alone. So, only add this path to the exceptions on whatever caching plugin you are using, otherwise your Google Fonts will not work:

wp-content/themes/jupiterx/lib/admin/assets/lib/webfont/

As per WP-Rocket, here are the optimal settings that you can import to it and use. But remember to change the CDN keys with their current place holders.

Optimize the images

Optimizing images is one of the most important factors in improving performance and in speeding up your website in Jupiter X.  Why use the extra time to load a web page and waste internet traffic when you can represent your content with smaller image sizes and the same quality?

There are many tools out there that can help you optimize images and get better results in the performance tests. WP Smush and Hummingbird Cache are good examples. Also, some plugins offer optimization on the Cloud, and if you can pay for their services, they are actually the best. Tiny Compress Images is an example. You can find more information on this blog post.

Using a CDN

CDN is short for Content Delivery Network, which can be described as a network of servers that delivers cached static content from websites to users based on the user’s geographic location. Pretty confusing, eh? Don’t worry – we’ll break it down in detail.

A CDN allows you to serve your JS, CSS, images and video files to be served from another server. You simply upload them onto your website. But the first time someone checks out your page, the static resources (JS, CSS, images and videos) will be cached on a different server that is close to your location, speeding up the loading process for you. Many of the CDNs offer DNS servers and DDOS protection, so it’s also beneficial for you in other ways. A complete guide regarding using a CDN (CloudFlare) is already provided here. Don’t miss it!

Use a WordPress optimized web host

What if you improve the performance score and you still feel the website is slow? Well, it can be related to your web host. WordPress itself is kind of a heavy content management system. While using a premium theme, you’ll definitely need more resources on the server to speed up your Jupiter X site.

The minimum server resources can be found here, but you may need more WordPress and PHP Memory or a dedicated CPU usage to be able to handle large amounts of users. It’s better to avoid the cheapest plans offered by web hosts if you wish to have a performant WordPress website. A lot of hosting providers that have WordPress optimized plans are worth the money.

For instance, once I was trying to optimize a website for a client, and I did pretty much everything I could. However, the performance score was like 60. Changing the web host to a WordPress optimized plan made huge improvements, raising the score to over 90.

Keep your theme and active plugins updated

Since Jupiter X’s performance will be improved with each release, it’s better to keep it updated along with the bundled plugins.

When a development team realizes what part of their codes cause performance bottlenecks, they will fix and release updates. Jupiter X is also the same. Actually, within the next 3 months, a lot of performance improvements will be applied to the theme, and early results show that it will be at least 5 times faster than the current version. So, keep your theme and all plugins activated.

Avoid using external content

Using outsourced content will always cause a performance drop. It gets worse when the content removes on the external resource or a timeout happens. Ads services, video and audio players, maps and font providers are the most common external content resources that are used on your website. You might not even notice it. It’s true that sometimes using external content resources is cheaper than serving everything through your website. However, you need to balance it out. If you’re using a lot of external resources, you cannot expect to receive a good score from speed testing websites. As an example, you may check out this blog article regarding choosing between socially and locally hosted videos.

In the end, it’s worth looking at this page for further performance optimization tips.

Conclusion

A lot of factors should be considered to have a performant website when it comes to speeding up your website in Jupiter X. Although Jupiter X promises to be a lightweight theme, you may still need to improve your website loading score with whatever you’ve got.

In this article, we outlined the tools needed to scan the performance and ways to improve them. If you’re sure that you applied all the recommendations and your site is still slow, you can contact Artbees Customer Support. We’ll happily review your site and give you expert advice on how you can fix the issue.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.

Good Morning Class! Here’s What You Need to Know About Building an Education Website

In the digital age we’re living in, the internet has changed our lives in several ways. Could you imagine a day without surfing the net for anything from finding information to social networking, from entertainment and shopping to money transactions? Probably not!

Education and learning got their share of this change as well. Universities and schools are now widely present on the world wide web – not to mention the rise of online courses! Most of us are tired of the headache of browsing university or educational websites! So if you’re running an educational facility or business, building an education website that is uncluttered, accurate, user-friendly and visually attractive at the same time is essential.

In this post, we’re going to share some useful tips to keep in mind while designing your site.

Visually Rich

Education websites target two types of visitors: students and parents. Students visit the website to find out more about campus life, class, and after-school activities, among other things. Parents, on the other hand, visit the school’s website to learn more about tuition fees, the school board, and facilities in addition to the points above. In terms of design, the website should be visually appealing to create a good first impression. So it’s essential to properly use welcoming pictures and videos.

The best way to encourage visitors to check out what an institute has to offer is by displaying an interactive image of the students studying or campus life with enticing background colors in the hero section. But beware! Avoid stuck photos while building your education website! Be authentic and present what really goes on at your learning institute.

The Jupiter X Language School template took this approach. As seen below, a full-size image of a student on a bright neon green background and welcoming slogans perfectly captivates visitors at first glance.

Building an education website Language School

One other approach would be to choose the color palette to match the concept of the school. For example, a website for a preschool would look much better with colorful text, button, and background, funny animated texts and images, among more. Have you ever seen a kindergarten website all in black or dark colors?! I doubt it!

An excellent example of this approach is the Jupiter X Preschool template, which has a light pinkish color scheme.

Building an education website preschool fullwidth

And finally, matching website colors with the school or university’s branding colors can also be good practice and will make the website design more authentic and original.

Not Minimal but the Right Amount of Simplicity and Information Accuracy

Building an education website that is minimal is almost impossible due to the amount of information and content embedded in it. But this rule applies to any type of design: keep it simple! Think about an uncluttered website that students and employees can easily navigate through and find the information they need with minimum effort.

The Jupiter X Course 2 template is made up of well-organized sections with categorized posts, with just enough information sitting on easy-to-comprehend boxes. Everything you need to know about online courses is clickable and on point with the adequate use of images and text. This results in an overall functional, user-friendly design. This online course template serves as a great example of how a design can be simple yet striking and appealing.

Make it Responsive

Education websites provide more than just information about admissions, dates, and departments. School and online education websites are the main way students and parents interact with the school. Students log in through portals to learn their grades, contact teachers, navigate through departments and get information about facilities. The same goes for parents who see the website as a gateway to the school. That means all the information should be available for them on the go and on all screen sizes.

Browsing through phones and tablets is much more popular than before – particularly among the younger crowd. So while building an education website, keep in mind that all your elements, navigation menus, visuals and the user-friendliness of the website are kept intact.

SEO and Speed Optimized

The goal is that your educational center attracts more users to whom you can offer services. To do this, the website needs to be easily found online, which is why you should ensure your website is SEO optimized. Through implementing proper keywords into your website content or hiring SEO experts to apply more professional SEO practices, search engines will better analyze your website and boost your rankings in their algorithms. As a result, you’ll easily be found by those who are looking for quality education.

Previously, we mentioned simplicity. Even more important than aesthetics, too much content and too many visuals slow down your website. Slow page load will scare users away. Remember that by holding onto the simplicity rule, you can keep users engaged by allowing them to quickly access the information they’re looking for.

Make Awards and Achievements Stand Out

You need to constantly remind your site visitors that the quality of your institution and its services stand out. Brag about the achievements and awards your institution accomplished throughout the years. Dedicate a section of your design to awards and impressive numbers, which is possible by using a counter element. Check out live examples in the Jupiter X University and Osogoa templates.

Building and education website counters

Dedicate Pages to Blog and Events

You value your site visitors – and in your case mostly parents – so much that you share every piece of news and update them about your institution! Isn’t that what any professional and caring school would do?! You got it! Creating an Events or Blog page while building an education website would be the best idea to keep your users engaged in your services.

Design an Events page on your website to announce upcoming, current or past events. By using the Jet Listing element, you can present your event content within a grid as you wish and link it to the events detail page for date, time and event descriptions, and you can build a separate blog page to share news about breaks, holidays, exams, school events or even articles related to education. A regularly updated blog with appealing and relevant content could greatly help you in attracting more visitors.

If you want to see what a properly designed Events or Blog page would look like in action, check out the Jupiter X Language School and Preschool templates.

building an education website events blog

Consider Culture and Languages in Design

If you are a well-known, international institution, chances are that you attract students from different countries. At this point, having a multi-language website is critical. Non-English users may miss out on important events and information simply because they misunderstand something on your site. You wouldn’t want to miss out on a prospective student for this trivial reason! So consider the language factor when building an education website and make it available to more users around the world by adding languages that you assume the majority of your prospective students speak.

Jupiter X has features that allow you to have a multilingual and RTL compatible website in no time. Read more about them here.

Create a Listing Website if You Have Several Courses and Classes

If you run a big institution or an online education website with hundreds of courses and classes, a listing might be the best tool for you to organize the courses into sections. You can customize their layout and showcase your courses as you see fit. A listing grid layout is perfect for content-heavy websites that display items for different purposes but with equal hierarchy. The Jupiter X Language School, Course and Course 2 templates all have great examples of showcasing courses using a listing grid.

Listing is a widget by the JetEngine plugin. If you’d like to learn more about how to create listings and customize layouts, please check here or the documentation.

One other cool feature that you can add to your listing is the Smart Filter. In fact, it’s a must-have if you want your site to be user-friendly. Smart filters allow users to narrow down their choices by courses, authors, date, etc. and get to exactly what they’re looking for faster and more efficiently, and by using the Checkboxes widget, they can apply multiple items to their choices. The Jupiter X Course 2 template applied these filters to its courses page, and it works like a charm!

Check out the JetSmartFilters official page to learn more about this useful plugin.

Instructors List

And finally, an important part of any education website is the instructors’ and teachers’ introduction section. The listing grid has many functionalities as mentioned above. You can create your own post types, from services to projects and from products to team members and customize every detail about them.

Using the listing grid element enables you to create a profile for each instructor with information about their position, major, classes and more and in the single listing page for each profile to add a description about the instructor’s background, education and more.

Parents and students alike will absolutely love this level of transparency about teachers’ backgrounds, guaranteed! The Jupiter X Course 2 template has a fantastic example of this instructor’s list in action.

Building an education website instructors

Conclusion

Regardless of the size of your school or the type of knowledge you offer and disseminate, a well-designed website can undeniably help your school grow. It’s time to accept the importance of an online presence and get to work!

Let us know about your experience building an education website in the comments. Which one of these tips inspired you and what was the feedback from your users? And finally, please help us in creating a more comprehensive list by adding the tips we might have missed.

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.