I’ve recreated it using Crocoblock plugins and will give you a step-by-step guide on how to do it in this article. Check the live demo here. 

Table of Contents

• The Scope of Work
• Crocoblock Tools Used
• Adding Events
  • Creating CCT for events
• Creating Queries in Query Builder
• Creating Listing Templates
• Setting Up Filters
• Сomposing the Events Page
• FAQ
• The Bottom Line

The Scope of Work

The event page of WordPress events for 2024 has the following components: 

1. Interactive map with pop-ups that display the information about events and a link to the event’s page.
2. A list of events. 
3. Filters for this list (search field and sorting by month, format, and type).
4. A dynamic counter for the events.
5. A dynamic counter of the countries in which these events will take place. 

There is also a number of participants displayed on the original page, but I will skip it for now. They could also be displayed dynamically, but it requires more advanced logic. 

Also, I will recreate only some European events for obvious reasons, not to add over 1,000 of them to the demo site. 

Here is a step-by-step work plan:

• creating a CCT and adding events;
• creating custom queries in Query Builder;
• creating Listing Templates based on these queries;
• setting up filters;
• composing the Events Page and fetching data dynamically.

Crocoblock Tools Used

1. Custom Content Types. This is a Crocoblock-specific entity, and they are used for better performance and reducing the Database size in case there is a large number of records. We will store individual events using them. It’s also the most convenient way because the events have individual pages on third-party resources. 
2. Query Builder. A powerful tool to get any data from the Database. I’ve used it to get all the events, the total number of countries and events, and to display in-person events only. In total, there are three queries.
   We need a separate query for in-person (not online) events, as only this type should be displayed on the map.
3. Map Listing. It showcases the in-person events on the map and on-click pop-ups that display brief info with a link to the event. 

By the way, if you need a geolocation filter so the users find something close to their location, we’ve released a functionality for it; read the detailed tutorial here. 

4. JetSmartFilters. They filter events with AJAX right on the page.
5. Timber/Twig Views. I’ve created listing templates using Twig. This way, the best performance can be achieved. 
6. Listing Grid. It’s a widget/block for looping JetEngine Listing templates. 
7. A Dropbar widget from JetElements is used to create a smooth filter display. However, it’s pretty optional, and only if you use Elementor to compose the event page. 

In total, two Crocoblock plugins were used to implement this functionality: JetEngine and JetSmartFilters. The additional plugin is JetElements, which is used to display filters in a dropbar. 

I will demonstrate settings using Elementor, but all of these work equally well in Gutenberg and Bricks.

Adding Events

First, let’s create a CCT for events. CCT is a Crocoblock-specific entity similar to CPT but doesn’t have a dedicated single page (but can be linked to any of the post types to have it and inherit its template) and stores the whole post in one database row, which is great for performance. You have full control over its REST API settings and admin columns as well. 

It can have meta fields, relations, etc, just like CPTs. 

Another advantage of using CCT in our case is that a dedicated JetFormBuilder form can be created in one click, so you can easily populate the CCT records via the front end – which is exactly what we need for events when users submit them. 

Also, the WordPress community events on the original site have a meeting agenda on meetup.com or other third-party resources, so we definitely don’t need single pages in this case. 

Check the guided use case of collecting events from different websites using the REST API tool by JetEngine here. 

Creating CCT for events

First, activate Custom Content Types and Map Listings modules in JetEngine > JetEngine. The Custom Content Type option will appear in the JetEngine section of the Dashboard. Click “Add New” and create a CCT called “Events.” 

I’ve added eight meta fields to it:

1. Event URL (text);
2. Event Date (date);
3. Event Type (select type, with Meetup, WordCamp, and Other options);
4. Event Format (radio type, with In-Person and Online options);
5. Event Location (map);
6. Event Country (select from Glossary);
7. Event City (text).

I’ve also selected the fields I wanted to see in the admin columns. 

After that, the Event CCT will appear in the Dashboard menu, and it’s time to add the events. Don’t forget to add a map provider (e.g., Google Maps) with their API key in JetEngine > Maps Settings. 

Creating Queries in Query Builder

Custom queries are required to fetch the exact content we want in the order we want. The query results can be cached as well. 

All Events query

To display all events in chronological order, I create the All Events query with query type “Custom Content Type,” “events-list” ID (it’s required to deal with filters on the Main Page), and “from lowest to highest” order.

In-Person Events query

As only in-person events will be displayed on the map, let’s create a query to display only this type. It will have the same settings as the previous query (but it doesn’t require an ID) to sort by date, plus it selects the “Event Format” field value equal to “in-person.”

Total Number of Countries query

To count the number of countries where the events will take place, I will use Query Builder with a query type “SQL/AI query.” Switch the Advanced/AI query toggle.

The command is the following: 

SELECT count(*) AS total_events, count(DISTINCT event_country ) AS total_countries FROM {prefix}jet_cct_event;

If you want to modify the query but are not so familiar with SQL commands, use the AI tool and check our article about popular queries. 

Creating Listing Templates

Listing templates are the templates for the loop, which are based on selected queries. There can be various types of listing sources and display posts, users, terms, relations, Options Pages data, Query Builder data, Repeater fields, Custom Content Type items, and REST API endpoint items.

In this case, I will use a Query Builder as a source with the queries created above and the Timber/Twig view to design them to ensure the best possible performance. 

To use it, activate the Timber/Twig view in the JetEngine > JetEngine > Performance tab and follow this guide for detailed instructions on creating it. 

For this project, I will need two listing templates: 

• List Event – to display the list of all events; 
• Map Event – to display events on the map. 

The List Event listing is for displaying all the events (online and in-person). Choose the All Events query as a source. 

This is the code I’ve used:

HTML/Twig:
*(remember, you can generate Twig tags dynamically using buttons on the top)

<div class="list-event">
	<div class="list-event__name">
		<a href="{{ jet_engine_data(args={key:'event__event_url'}) }}" target="_blank">{{ jet_engine_data(args={key:'event__event_name'}) }} ↗</a>
	</div>
	<div class="list-event__where">
		{% if jet_engine_data(args={key:'event__event_format'}) == 'in-person'  %}
			{{ jet_engine_data(args={key:'event__event_city'}) }}, {{ jet_engine_data(args={key:'event__event_country'})|jet_engine_callback(args={cb:'jet_engine_label_by_glossary',labels_by_glossary:'2'}) }}
		{% else %}
			Online
		{% endif %}
	</div>
	<div class="list-event__when">
		{{ jet_engine_data(args={key:'event__event_date'})|jet_engine_callback(args={cb:'jet_engine_date'}) }}
	</div>
</div>

CSS:

.list-event {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 20px;
	border: 1px solid #d9d9d9;
	margin-top: -1px;
}

.list-event__name {
	flex: 0 0 60%;
}
.list-event__where,
.list-event__when {
	flex: 0 0 20%;
	color: var(--e-global-color-text);
}

@media (max-width:768px) {
	.list-event {
		flex-wrap: wrap;
		font-size: 14px;
	}
	.list-event__name {
		flex: 0 0 100%;
	}
	.list-event__where,
	.list-event__when {
		flex: 0 0 auto;
	}
}

As you can see, I’ve used global style variables here, such as color: var(–e-global-color-text); in our case, it’s Elementor’s variables, but the same approach can be used with other tools. It’s recommended to maintain the style compatibility without editing the code. 

As a result, we will get the following view:

The the Map Event listing, I use the In Person query as a source. 

The design is pretty similar:

HTML/Twig:
*(remember, you can generate Twig tags dynamically using buttons on the top)

<div class="map-event">
	<div class="map-event__title">
		{{ jet_engine_data(args={key:'event__event_name'}) }}
	</div>
	<div class="map-event__link">
		<a href="{{ jet_engine_data(args={key:'event__event_url'}) }}" target="_blank">Open event site ↗</a>
	</div>
	<div class="map-event__meta">
		<div class="map-event__meta-row">
			{{ jet_engine_data(args={key:'event__event_country'})|jet_engine_callback(args={cb:'jet_engine_label_by_glossary',labels_by_glossary:'2'}) }}
		</div>
		<div class="map-event__meta-row">
{{ jet_engine_data(args={key:'event__event_date'})|jet_engine_callback(args={cb:'jet_engine_date'}) }}			
		</div>
	</div>
</div>

CSS:

.map-event {
	background:#fff;
	padding: 20px;
	font-family: var(--e-global-typography-text-font-family);
	font-size: 13px;
	color: var(--e-global-color-text);
	border-radius: 3px;
	box-shadow: 0 3px 5px rgba(0,0,0,.1);
}

.map-event__title {
	font-weight: 500;
	font-size: 16px;
	padding: 0 0 10px;
	color: var(--e-global-color-secondary);
}

.map-event__meta {
	padding: 10px 0 0 0;
}

This is the output preview:

Setting Up Filters

I guess there’s no need to explain why filters are essential here. 

I will create four filters:

1. Search (by event name) – search;
2. Format (In–person or Online) – radio;
3. Type (Meetup, WordCamp, or Other) – radio;
4. Date (select month) – date period. 

Search filter settings (search type)

The settings for this filter are pretty straightforward: select the Search By Custom Field and type the Query Variable “event_name” (the name of the field for your event). 

Format filter settings (radio type)

• Data Source – Manual Input.
  Add options with “in–person” and “online” values (they must be the same as the option of the “event-format” meta fields of your CCT);
• Type the “event_format” query variable;
• The comparison operator should be “equals” (=);

Type filter settings (radio type)

The settings are the same as for the previous one, but the options must be for the “event_type” meta field and the “event_type” query variable. 

Date filter settings (date period type)

• Filter by – Meta date;
• Period type – Month;
• Datepicker button text – Month;
• Start/End Date Period Enabled – toggle activated;
• Query Variable – event_date.

Сomposing the Events Page 

I will demonstrate settings using Elementor, but it works equally well in Gutenberg and Bricks. 

First, let’s place the interactive map on the page. Add the Map Listing widget with the Map Event listing selected “event_location” meta key in the Address meta field input in General settings and your preferred style settings for the map (height, center, etc.). I’ve used this custom map style to look like the one on WordPress.org:

[
    {
        "featureType": "administrative",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#444444"
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "all",
        "stylers": [
            {
                "color": "#f2f2f2"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "all",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 45
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "all",
        "stylers": [
            {
                "color": "#c8d1fc"
            },
            {
                "visibility": "on"
            }
        ]
    }
]

Marker tab

I chose the WordPress icon. 

Popup tab

This is the pop-up to display the info about the event, designed in the Map Event listing. 

The size is 320x45px, with a pop-up preloader activated and a pin, it opens on click. 

Here is the result: 

To add the dynamic counts of events and countries, I used a Heading widget and a dynamic tag. Choose “Dynamic function” from the JetEngine section of the list and the “SQL query results” function. Choose the “total_events” query column to display the number of events and the “total_countries” to display countries.  

In the Advanced tab of the same window, add the text that comes after the dynamic data:  events this year/countries. 

Now, let’s display the list of all events with filters.

For the Seach filter, add the Seach Filter widget and select your filter; choose AJAX on typing, with a minimum of 3 letters, and the “events-list” query ID. 

To display Radio filters (Format and Type), I’ve used a Dropbar widget to show the radio fields as a smooth dropdown (for Gutenberg or Bricks, use other solutions or just add the radio filters as they are). Choose the Button type – Text, and type the name of the filter. In the Content Type tab, choose Template.  

Create Section templates using Elementor (for Format and Type filters). Add the Radio filter to that section with the “events-list” query ID and AJAX apply type. You should create two templates like this for Format and Type filters. For the first one, choose the “Format” in the Select filter input, and for the second, choose the “Type” one. Add styling, go back to the main page, and choose these templates for the corresponding Dropbar widgets. 

For the Date filter, add the Date Period filter widget. Select the “Date” filter, choose the AJAX apply type with Apply on Value change, and specify the “events-list” query ID.

Finally, to clear all the filters, add the Remove filters widget with AJAX apply type and “events-list” query ID. 

Don’t forget to style everything.

The final step is adding the list of all events. Add the Listing Grid widget, choose the Event list listing template, “Published” status, select “1 column” and Lazy Load. If you want to use Infinite Scroll or Load More, they are available right here in settings. In case you want to add pagination, check this guide. 

Enjoy the result! 

FAQ

The Bottom Line

In this article, I demonstrate how you can recreate the main event page of the WordPress community with just a couple of Crocoblock plugins. There’s also a lot of space for additional development if you want to create a more complex event directory or combine it with membership functionality. 

The post Recreating WordPress Events Page with Crocoblock Plugins appeared first on Crocoblock.

Our case will be useful to anyone running a service-oriented business who wants full control over the appointment booking functionality, making it more feature-rich, the process more flexible, and saving a considerable amount of money on third-party service subscriptions. 

Table of Contents

• The Scope of Work
• Main Reasons for Moving to JetAppointment
• The Process of Switching to JetAppointment
• How to Set Up JetAppointment
• Additional Customization
  • Limit the number of bookings per month
  • Additional fields
• FAQ
• Bottom Line

The Scope of Work

Crocoblock Support team offers quite a unique feature for its clients: customers can book Zoom calls with support agents to resolve their issues or answer their questions in face-to-face conversation and see the client’s screens to help in real-time. 

You can find the form on this page. 

At the time we launched this service, we had the following requirements for the appointment booking page:

1. It should be a dedicated page where the client can pick a date and time of the meeting and fill in contact details. 
2. Since Crocoblock’s clients live all over the world, it’s essential that the customer selects their timezone while booking the date and time of the appointment. 
3. There should be a set of fields for the client to share some details about their case so the support agent can study it in advance and be even more helpful.
4. Zoom meetings must be generated automatically when the appointment is booked.
5. Functionality for sending details about the scheduled meeting to the client (with the date, time, link to the conference call, and a cancellation link).
6. A reminder email with all the details must be sent to the client.

Also, we wanted to have full control over the settings from our side. In particular, our support team should have:

• A convenient dashboard where our support agents could easily find the daily agenda for Zoom calls, clients, and the details about the issues they want to discuss. It must be easy to navigate, filterable, and have different views.
• Full control over the agenda and the ability to change the available time slots and days for the appointment booking.
• According to our policy, each client can book a limited number of Zoom calls per month. That’s why it was important to have a functionality that automatically restricts the number of appointments per customer. 

At the time when the Zoom calls with clients were introduced, our JetAppointment plugin couldn’t cover some of these requirements; that’s why we’ve used a third-party service – Calendly. It had everything we needed except the ability to limit the number of appointments per client. 

Main Reasons for Moving to JetAppointment 

Right after the launch of Zoom calls with our support agents, we realized that we would definitely switch to using our JetAppointment plugin. Here are some reasons why:

• The most obvious one is that we couldn’t sell appointment booking plugins while using a third-party solution. In this case, a very logical question arises – why do clients need this plugin if it does not meet our own needs?
• In terms of GDPR policies, the less data we share with third-party services, the better.
• Using a third-party solution made the whole structure more complex. First of all, we had to pay for it (and each supporter’s seat adds to the cost). Also, it falls out of the structures of our URLs, so we couldn’t see the analytics data and had no full control over the design, navigation, and functionality of the service to make the interface more friendly for the clients. 
• As I’ve already mentioned earlier, the crucial aspect for us was to be able to limit the number of appointment bookings the client can have per month. 
• We wanted to make a time zone field required and also double-check it with the information about the time zone in which the user has booked the appointment to ensure that it’s correct and avoid frustrating missed calls. 
• Clients often lose the links to the Zoom calls, so it was important that the support agents working with tickets and chat could resend them to the customer. However, we didn’t want to give the entire support team access to the Zoom meetings dashboard. 

The Process of Switching to JetAppointment

Based on the requirements I listed at the beginning of this article, we started to review the functionality of JetAppointment to understand what was missing. Another important task was to match it with clients’ requests as well, to get a perfect combination of the tools it would offer. 

As a result, JetAppointment 2.0 has the following features:

• Workflows. This functionality made it possible to set various actions in accordance with the appointment booking status or the changes made to it. 
• Zoom integration. The direct integration with Zoom for creating scheduled meetings automatically. It also made us implement an API for other integrations, which will be added in the upcoming releases. Advanced users can already add their own custom integrations programmatically.
• Time zone picker for the front-end calendar. This option allows users to choose a time zone (and make it a mandatory field) while booking an appointment, and the time in the calendar will be automatically adjusted according to this time zone.
• Public actions functionality (confirm and cancel appointments links). These are public URLs with security tokens. Such links can be generated automatically and sent via email or a webhook (for services like Zapier or Make), so the client can change a booking status just by clicking on that link. 

How to Set Up JetAppointment 

To implement the appointment booking functionality as described above, with all the perks it gives, you will need the JetAppointment and JetFormBuilder plugins. 

  Read this step-by-step guide about setting up an appointment scheduling functionality on your website. 

Additional Customization

Limit the number of bookings per month

This functionality was implemented using the Limit Form Responses add-on for JetFormBuilder. You can either limit the number of responses per form or for one user and restrict it by IP address, session or cookie value, and by the user ID for registered users. Also, you can set up the time period after which the limitation will reset (one month in our case) and write a restriction message.

Additional fields

Using JetFormBuilder, we can collect additional information by adding fields to the booking form. Further, our task was properly displaying this data to each support specialist in the appointment agenda. 

This can be implemented in two ways:

1. By adding additional columns to the booking table.

2. Using a custom solution and adding meta fields.
   
   This is what we have chosen to experiment with. By default, these meta fields are aimed at collecting service information, such as Zoom conference links, tokens for canceling or confirming the booking, connected workflows, etc. However, we decided to expand their number and functionality to store data from the form fields. Stay tuned because we will add the best experiments to our next releases. 

FAQ

Bottom Line

In this article, I’ve talked you through our process of moving from the third-party service for booking appointments to the in-house solution with all the benefits it comes with. As you can see, using JetAppointment, not only can you save money but also have full control over every little detail of the booking calendar and the workflow. Other than this, you can add all the additional fields, integrate them with other plugins, and even display data on the front end if needed. 

So, grab your JetAppointment plugin and enjoy using it for your service-oriented business. 

The post Appointment Booking: Moving from Calendly to JetAppointment appeared first on Crocoblock.

There is a choice of SaaS services that manage online scheduling, but the price often heavily depends on the number of users, appointments, and various factors, not to mention the restrictions they always have. Why not create your own appointment booking system on the website to suit you perfectly? 

In this article, using an example of the Crocoblock Schedule Zoom Call page, I will show you how to set up appointment booking functionality on your website using just three plugins and have no limitations on the number of service providers (consultants) and teams (departments). 

To learn why the Crocoblock team moved to JetAppointment from Calendly and all the advantages and features, read this article. 

Table of Contents

• Plugins to Use
  • JetAppointment
  • JetFormBuilder
  • JetEngine (not required but strongly recommended)
• Setting Up Appointment Booking Functionality on the WordPress Site
  • Setting up the JetAppointment plugin
  • Setting up the appointment booking form
• Additional tips
• FAQ
• Takeaway

Plugins to Use

JetAppointment

As the name suggests, JetAppointment is the central plugin for implementing appointment booking functionality, and it offers a list of additional useful features, such as:

• WooCommerce integration and setting up price per time units;
• recurring appointments;
• multiple services and providers to choose from;
• integration with Zoom and any other service with a webhook and automation services (e.g., Zapier, Make, or WP Webhooks).

JetFormBuilder

I’ll put it simply: if you want any of Crocoblock plugins to get data or get manipulated from the front end, JetFormBuilder is there for you because it has all the required integrations and tools. It’s a free plugin available on the WordPress plugin directory, with paid add-ons that you can purchase here. If you are a happy client with the All-Inclusive Crocoblock subscription, the premium add-ons will be free – just click a dedicated banner on your user account. Also, to get an idea of what it can offer you, read the plugin’s documentation, especially the Advanced section. 

JetEngine (not required but strongly recommended)

JetEngine makes any website and any other Crocoblock product even more powerful, flexible, and awesome. Talking about the appointment booking functionality, it will be useful to create CPTs for the services, listing templates for teams and service providers, as well as display user’s appointments on the front end. Other than that, JetEngine is responsible for creating relations, additional meta fields, glossaries, etc.

Setting Up Appointment Booking Functionality on the WordPress Site

Before starting to set up the functionality, let’s outline the scope of work. The goal is to create a page for booking a 20-minute Zoom call with customer support. The client can pick the date and time from the available slots and then put their name, email address, and some other details for the support specialist. They immediately get a confirmation email with the Zoom meeting link and the link for the appointment cancellation. One day before the video call, they get a reminder email.

Setting up the JetAppointment plugin

There will be two parts: setting up the JetAppointment plugin and a JetFormBuilder form. 

Creating Service and Provider pages

Before setting up the plugin, it’s important to know that it operates two entities: service and provider. For example, if it’s a nail salon, the services would be manicure and pedicure. The service providers are the nail stylists working in this salon so that the client can choose the procedure and the specialist. This demo shows it well. 

That’s why first, create a page/post/CPT to be the Service that clients will book.

In our case, we have only one service on the dedicated mini-site of the multisite, and that’s why we didn’t create a Service post type. But if you have several services and want them to put descriptions, pictures, and catchy designs for each of them, like this one. The same goes for the Service Provider pages, like on this demo page. 

Using the JetAppointment Wizard

The easiest way to set up appointment functionality is by using Wizard in Dashboard > JetAppointment > Set Up. 

For more advanced settings, adding workflows, and fine-tuning the details, use Dashboard > JetAppointment > Settings. For example, it’s great to add a time zone selector.

It’s a very intuitive process, but you can check this guide on how to set it up.

In the video below, I’ve shown the walk-through of the Wizard. As you can see, it automatically creates forms that can be edited and used on the front end.

You might be wondering why two forms were created. Read about the difference between Static and Single Service forms in this article. 

Integrating Zoom and notifications

Now, the appointment booking functionality works, and clients can book their time slots for Zoom calls. However, we want such meetings to be automatically scheduled in the customer support Zoom account. It’s not a problem because JetAppointment has the built-in Zoom integration. All you have to do is go to Dashboard > JetAppointment > Settings > Integrations and insert API keys from your Zoom account. There’s also a very useful toggle “Delete meeting on appointment cancel” to be activated in our case.

After that, go to Dashboard > JetAppointment > Settings > Workflow, add the “Create Zoom Meeting” action, and set the timing for it – immediately or after a certain time. Name the agenda (how the meeting will be displayed in Zoom), and enjoy the automation. 

Setting up notifications and links for clients and the Support Team

The final step is to set up notifications for clients so they can get a confirmation about the appointment, then a reminder, and also have all the information about the Zoom call, as well as a link to cancel it if their plans change. 

Go to Dashboard > JetAppointment > Settings > Workflow and click “Add New Workflow Item,” set the trigger (when the appointment is created or when the status changes), and set the timing (immediately or after a certain time). Now, add Action Items – sending an email, calling a webhook, or creating a Zoom meeting (but first connect the Zoom API). 

If you choose to send the email, the email body can be edited right here, and to insert dynamic data and links, use the icon with a database. As you can see, there are a lot to choose from:

A similar email is being sent to the Support Team.

Read this article for more details about setting up a workflow.  

Setting up the appointment booking form

The Wizard creates forms for you, but we had some tweaks to add to them. To be precise, we will use the Single Service Booking Form because it doesn’t have a “Select Service” option (it’s a compulsory one for the Static Page Booking Form). We don’t need it, because it’s only one service in our case. 

That’s why we should edit the hidden field called “service_id” (on the very top). By default, it has the “Current Post ID” value because this form is supposed to be used only on the service page. But we will use it on the main page; that’s why changing “Current Post ID” to the actual ID of the Service page we’ve created at the very beginning is essential. Choose “Manual input” and insert it. 

The right column of the booking page shows the information about the chosen date and time dynamically. The key here is using a macro:

<!–JFB_FIELD::field_name–> 

Just insert a field name you want to display dynamically. Use the HTML block to insert macros. 

Read more about using JetFormBuilder macros in this article. Advanced users can check out this small add-on that adds attributes to macros.

The date and time are displayed after the user has selected it, but if not, they will see the instructions about choosing the date and time. It’s been done using the Conditional field wrapper. So, the instruction is shown when the “appointment_date” field is empty, and the macro shows field values – when it’s not empty.

We’ve used a multi-step form here, so there’s also a “Confirm” button in the conditional section that is shown when the user has chosen the date. But this button actually leads to the next step of the form. 

Also, you can use one of the JetFormBuilder premium add-ons to limit form responses, save form progress, or autofill – they will work great with this functionality. 

This is what the appointments look like on the website’s dashboard. They can be filtered, exported, and displayed as a calendar or a timeline.

Additional tips & tricks

Double-checking the client’s time zone

To ensure that the client has chosen the right time zone, we double-check it. So, in the email body that is sent to the Support Team, we add the local date and time of the user (which was detected when they booked the appointment) using macros in JetAppointment > Settings > Workflows > Actions: 

%user_local_date% and %user_local_time% (they are available in the list of all dynamic macros; just click on the database icon).

Sending links to Zoom Meetings to the Support Team

Clients sometimes lose their links to the Zoom appointments they’ve booked and message us to the chat or open a ticket to find it. However, support agents responsible for Zoom calls are not the same people who reply to the chat/ticket messages. To streamline this process without giving all the support specialists access to the video call dashboard, we send links to the meeting to the team’s inbox so any member of the Support Team can easily find them. 

Sending the data from additional fields

If you add additional fields on the booking form (except email, name, etc.) and want this data to be saved on the Appointment calendar, you should add these fields as additional database columns in JetAppointment > Settings > Tools, and then use these names as field names.

For more ideas about expanding the plugin’s functionality and integrating it with other tools, read the documentation. 

FAQ

Takeaway

In this article, I’ve shown how to set up a scheduling appointment functionality on your WordPress website using the example of Crocoblock’s Schedule Zoom Call page. This solution is easy to make, flexible, and scalable. You can create simple appointment booking functionality, add multiple services, teams, and specialists to choose from, set prices per time unit, and charge your clients. As usual, Crocoblock offers a robust set of tools to bring your ideas to life without any limitations.

The post Appointment Scheduling in WordPress Using Crocoblock appeared first on Crocoblock.

Enter the savior of small screens – the hamburger menu. This nifty concept of a universal button that opens a full menu, sporting an icon eerily reminiscent of a hamburger (fun fact: it was proposed 20+ years prior but didn’t catch on until the 2010s), came at just the right moment.

This article delves into the popularity of this convenient navigation tool. It explores typical and unique ways to incorporate it into web design, drawing examples from websites built with Crocoblock plugins.

Table of Contents

• What Is a Hamburger Menu?
• Best Practices for Creating Hamburger Menu
• Hamburger Menu Examples Created With JetPlugins
• FAQ
• Sum Up

What Is a Hamburger Menu?

Today, the use of the hamburger menu has skyrocketed, with its telltale three horizontal lines indicating a hidden menu. Why has it become such a rockstar in the design world? Two words: functionality and universal recognition.

Firstly, let’s talk functionality. The hamburger menu streamlines the layout, letting users focus on what interests them rather than wrestling with a menu they don’t need right that second.

Secondly, the universal recognition of the hamburger icon is a game-changer. Even if users aren’t consciously thinking, “Hey, that looks like a hamburger,” they’re instinctively reaching for that button because it’s become the go-to spot for essential navigation options. The functionality would still be a tough nut to crack without this universally accepted convention.

Best Practices for Creating Hamburger Menu

Using the hamburger menu on small devices has become nearly universal for websites and applications, including messengers, YouTube, and Google Search. 

As you’ll observe in examples featuring Crocoblock’s plugins, it extends beyond small screens to full-screen websites. Some use it for secondary navigation options, especially when the primary navigation bar is already packed. Many web designers take a bolder approach, making it the main navigation button. It ensures a cleaner design and focuses exclusively on the page content. A striking example features a background video that owes its impact to the hamburger’s functionality.

Here are best practices for creating effective hamburger menus:

• When utilizing the hamburger menu, ensure it retains all necessary functionality without sacrificing design. This goal is effortlessly achievable with the JetMenu plugin, including videos, images, social media buttons, or dynamic data and creating complex multilevel menus with subcategories.
• Implement clear navigation tools for discovering and clicking the hamburger menu and navigating within it. Facilitate easy exits through a prominent X button in the usual top corner, clicking outside the menu, or both.
• Infuse your style – don’t just follow the crowd! The JetMenu plugin provides control over hamburger menu CSS, allowing you to choose from different entrance animation effects that significantly contribute to both user engagement and overall website design.

Hamburger Menu Examples Created With JetPlugins

Study in North Cyprus

This website is built in different shades of teal, resembling websites used by medical facilities, healthcare services, etc. Most buttons, thumbnails, image borders, and other shapes have rounded edges, making the design feel safe and trustworthy, as if the website offered skincare products.

The hamburger menu icon (surprise! – three rectangles with sharp edges) is used in the mobile incarnation of the website, located in the top right corner of a webpage. Clicking it unrolls the navigation menu from the right side, covering the entire screen of most phones. Initially, the menu has only six options (an X-shaped close button with rounded edges!), but three lead to many suboptions. The ease of hamburger navigation is facilitated by large arrow pointers and return buttons.

This type of hamburger menu usage is typical for many mobile websites. The menu button is easily identifiable and recognized as the primary gateway to the navigation labyrinth.

Jävligt Gott

This website propagates vegan food and features a tasty-looking hamless hamburger as the first thing visitors see on the home page. This recipe apparently calls for two juicy patties in the middle – and so does the hamburger menu icon in the top right corner, which has an extra element.

A navigation top bar on the page contains several menu items, social media buttons, and a hamburger menu icon. Clicking the hamburger menu icon unrolls a menu from the right side, duplicating the navigation tools already displayed and adding several more. Interestingly, the designers also used the word “Navigation” with the icon to clarify that their hamburgers are also hamburgers!

The Shaw University Campus Calendar

This simple-looking campus calendar page provides a multitude of functionality through an array of Crocoblock tools. For example, users can access events that dynamically populate the calendar using JetEngine’s Calendar widget, various types of JetSmartFilters filters, and a header modified with JetBlocks to include sign-in functionality.

The hamburger menu icon is the sole pathway leading to the navigation options. Upon activation, the menu unveils links to other sections of the university website, along with a post about the upcoming feature event, complete with an image and titles. The ability to incorporate dynamic data and automatically display it in the menu is available with the JetMenu plugin.

SunVest

The home page of SunVest Solar LLC’s website showcases a captivating full-screen video of our rotating planet. The impact is truly remarkable, with minimal distractions from the stunning visuals. 

To achieve this effect, designers concealed links to various website sections behind a large hamburger menu button in the top left corner. Clicking on it reveals a menu that covers the entire screen. Scrolling down the homepage, the menu icon remains fixed in the corner. Interestingly, clicking on it at this point resizes the menu to about one-third of the screen, allowing you to continue scrolling.

Nomadea Evasion

Nomadea Evasion stands out as a typical travel website, organizing its blog posts by regions across the globe and presenting them on the homepage through vibrant thumbnails. While the design may appear overly simplistic on larger screens, it looks perfect on mobile devices. The mobile version offers just the right amount of white space between data blocks, providing a sense of lightness while ensuring every scroll remains informative.

On the mobile interface, the hamburger icon is one of the three buttons in the top floating bar. Upon clicking, the menu unfolds from the same side as the button, occupying about three-quarters of the width of a standard mobile phone screen. This usage of the website hamburger menu aligns with popular design trends, offering ample space for menu items while leaving a portion of the screen uncovered, allowing users to tap outside the menu to exit quickly.

ISL Design

This website boasts a sleek design with an all-white background and subtle bluish shadowing. A mobile hamburger menu icon appears in the top left corner of the page. Notably, clicking this button triggers the menu sheet to emerge from the opposite side of the screen, offering a somewhat unconventional approach. Initially, this might seem counterintuitive, given that most users expect a button to reveal what’s behind it. However, on the current page, the logic appears more aligned with “clicking the button to activate specific website functionalities.“

The strategic benefit of this layout becomes evident in its practicality – it facilitates easier one-handed opening and closing of the menu. With the uncovered part of the screen situated on the same side as the menu icon, users can seamlessly navigate with their fingers on a single side of the screen.

On the House Digital

Similarly to a previous example, the hamburger menu icon is used only in a mobile website version and is in the top floating bar. However, the menu appears from the bottom of the screen, graciously floating over the page content and stopping at the top.

This entrance motion effect adds an extra point to the site design, making it look more interactive. It would be more effective if users could dismiss the menu by swiping it down. Unfortunately, the opening process takes over one second, which becomes irritating after a few minutes of browsing the website.

Partopia

Partopia is a business consulting agency, and its website employs a distinctive navigation approach. Instead of a regular navigation menu, it utilizes a hamburger button. Upon clicking this button, the entire screen transforms into black, with prominent white letters forming the navigation options shining in the middle. This bold design choice, complemented by using bold fonts throughout the website, encourages visitors to click on landing page titles and actively engage with the content.

La Fermiere

This company specializes in dairy products, and remarkably, the website design subtly conveys this focus. The predominant color scheme, featuring shades of blue, symbolizes a commitment to freshness and healthiness.

The mobile website version, in particular, showcases an eye-catching top bar that includes the hamburger menu icon. It seamlessly integrates with the overall aesthetic by utilizing white lines, matching the thickness of various letters on the site, and positioning symmetrically to the search button within the branded top bar.

Upon clicking the button, a full-screen menu unfolds, presenting a large brand logo, essential links, and social media buttons. The hamburger navigation functionality not only aligns seamlessly with the company’s brand but also imparts a sense of professionalism and user-friendliness.

Coach Lab

This website may not showcase any innovations in web design, but it brings a refreshing perspective to some of the website hamburger menu functionalities. The triple-bar icon is situated in the top right corner of the mobile version, and clicking it unrolls the menu from the top to the bottom. Users can select a navigation choice, swipe the menu upward, and proceed to the page content. 

While not particularly groundbreaking, this design is just as practical as more commonly used methods, all the while adding a touch of uniqueness to the overall style.

Kreate Agency

Once again, we encounter a website relying exclusively on the hamburger button for accessing the navigation menu. After over a decade of use, web designers are unhesitant to adopt it as the primary navigation tool.

In this instance, designers have incorporated additional hints to indicate its role as the navigation link. Hovering over the icon prompts the appearance of an additional label, “Open Menu.” Upon deciding to click the hamburger sign, the menu bar emerges from the side of the screen, causing the rest of the content to blur. This approach, which resembles the one typically used on mobile screens, allows users to exit the menu by clicking on the blurred part of the screen.

Iamproperty

This website, catering to real estate agents, stands out for its rich content and unconventional navigation, particularly with the hamburger menu on smaller screens.

Upon clicking the hamburger icon, a full-screen menu unfolds, featuring a top bar with three buttons, a search bar, a link to a registration form, three links to sub-menus containing multiple landing pages, and additional links usually found in webpage footers. 

The standout feature, however, lies in the ability to navigate within this menu, exit by clicking the X button, and then return to precisely where you left off when deciding to reopen the hamburger menu. This unique functionality adds a distinctive and user-friendly touch to the website’s navigation system.

Emerald Guitars

Emerald Guitars, a unique musical instrument retailer, employs unconventional navigation methods on its website. The main navigation bar features links to pages showcasing commercial products and also includes a hamburger menu button. Upon activation, this button opens an additional menu on the right side of the screen, containing some of the same links along with new ones, contact information, and social media buttons. But the intricacy doesn’t end there. A smaller hamburger button in the far right corner of the page reveals yet another menu on the left, featuring nine more links, most of which were previously encountered in the other navigation options.

The benefits of such an abundance of navigation tools remain unclear, but one possibility is that they are conducting A/B testing on the site interface. Interestingly, in the mobile site version, all the navigation elements conveniently consolidate under a single hamburger menu.

AG Global Designs

This last website in the list adopts a conventional approach with the hamburger menu but refines its details to create a polished, light, and user-friendly interface. 

The hamburger button is positioned within the transcendent sticky top bar in mobile screen mode, and when activated, it reveals a compact accordion menu that covers one-third of the screen. This cool menu design enables users to scroll through the page while keeping the menu open. The result is a clean and efficient interface that enhances user experience.

FAQ

Sum Up

These examples demonstrate how the hamburger menu, coupled with Crocoblock’s JetMenu, elevates website layouts, crafting sleek designs without compromising the functionalities of intricate navigation systems. Simultaneously, this menu type enables diverse implementations and unique stylings, introducing a dynamic and personalized user experience.

The post 14 WordPress Hamburger Menu Examples appeared first on Crocoblock.

Building a website is, without a doubt, a time-consuming and expensive process. Not to mention, it requires special knowledge and the proper tools. If you want to build a website for appointments on WordPress but aren’t sure where to start, keep reading. 

In this article, you will see some Crocoblock-powered WordPress appointment websites and hopefully find inspiration.

Table of Contents

• What Features Should Be Added to a WordPress Appointment Website?
• Special Mention: Dynamic Templates by Crocoblock
• Top 8 WordPress Appointment Websites
  • Enhanced Scalp
  • Trois Coeurs Gourmands
  • Dj Shortee
  • Snaprep
  • Deli Klinika
  • Bike&Ski
  • Coclear
  • JoyRyde
• FAQ
• Final Words

What Features Should Be Added to a WordPress Appointment Website?

Before we look at different examples, let’s understand what elements and features are worth adding to appointment websites. 

Since these sites are often developed for medical clinics, beauty salons, and gyms, you need to consider each business’s specifics. However, there are some uniform website elements to be included, and I am about to outline them.

The appointment booking form is the first and most important thing that should be on the site. It is where the user can select the date, time, specialist, and service they want to book. You can create it by coding or using a plugin, like JetAppointment, that helps to implement the necessary functionality. 

The following mandatory things are the single pages for services and providers, category archives for comfy service display, and admin features. Website owners should be able to quickly add descriptions to services, helpful information, prices, and schedules.

Other valuable features you might want to add to appointment websites are:

• various calendar integrations for comfy appointment reminders;
• on-site communication through messengers;
• checkout page and payment integrations to accept payments directly on the site;
• currency selection;
• for website admin – the ability to view, approve, and edit booking requests;
• quick and convenient website search.

JetAppointment is a WordPress appointment plugin that helps to create appointment systems for different websites, like healthcare, equipment rental, etc. Not only does it help to add a booking engine, but it also can be used to customize the payment system and notifications. The site owner can easily add specialists, weekends for staff, and procedures and adjust their duration – all using the dashboard.

Special Mention: Dynamic Templates by Crocoblock

You can use ready-made website templates if you do not know how to add a particular functionality. For example, Crocoblock has three suitable options.

CutCloud is ideal for beauty salons and barbershops. It has service catalogs, a single page for each specialist, and a booking form. Plus, you can customize or add each element to your needs.

Medcenter. The name speaks for itself. This template is great for clinics and medical services provision. It has appointment functionality, calendar and payment systems integration, a custom SQL query, a front-end table layout, smart filters, relations, custom post types, and a glossary ready for customization.

Once is an excellent solution for spa salons. This website template allows customers to choose a specific time and date for procedures, provide their personal details, and more. You can integrate it with the needed payment systems for customers to pay right at the checkout.

Now, look at a few examples of WordPress appointment websites made with Crocoblock plugins.

Top 8 WordPress Appointment Websites

Enhanced Scalp

The Enhanced Scalp website belongs to a clinic that helps people who have lost their hair. They offer a micro pigmentation service for various areas of the scalp. It is not a standard procedure because most people prefer hair transplants, so potential clients must explain in detail what to expect. 

For this purpose, the developers made a carousel using the JetElements plugin. The carousel moves dynamically, allowing the user to explore all the information after clicking the image. 

Another interesting element on the page is the Instagram Gallery, which was added using the same JetElements.

Developer: Rajib Mridha
Theme & Template: Rajib Mridha
Plugins: JetElements, JetTricks, JetBlocks

Check the live website 

Trois Coeurs Gourmands

The following website is dedicated to fine pastry art and exquisite desserts. On it, users can learn more about delicious products and book master classes. 

Several JetPlugin elements are used here to make it easy for users to navigate the site and understand what awaits them. The first is Breadcrumbs from JetBlocks, and the second element is Satellite from JetTricks.

Developer: Codiwa
Theme & Template: Hello Elementor
Plugins: JetElements, JetTricks, JetBlocks, JetTabs, JetFormBuilder

Check the live website

Dj Shortee 

Dj Shortee’s website welcomes everyone willing to learn the art of music creation. There are many theoretical materials about creating tracks and the opportunity to register for various master classes.

In addition, everyone can buy branded goods through the website. The product gallery, for instance, is made using JetWooBuilder.

Developer: Shannon Ames
Theme & Template: Hello Elementor
Plugins: JetBlocks, JetWooBuilder

Check the live website

Snaprep

On this WordPress website, anyone can order interior visualization. They help to create 3D designs, room tours, and drawings. The Snaprep site itself has a pretty attractive and intuitive design.

The parallax effect from the JetElements plugin adds dynamism to the website and looks appealing.

Developer: Tornike Bestavashvili
Theme & Template: Hello Elementor
Plugins: JetElements, JetTricks, JetEngine

Check the live website

Deli Klinika

The following example is the website of a Hungarian medical clinic where users can set an appointment and learn all about upcoming procedures.

There are a lot of elements made with JetPlugins. Some of them can be found on the home page; for instance, a slider with current promotions is created with JetElements:

Another example is a JetEngine-built listing grid to which new articles from the blog are automatically added.

Developer: Onlinevagyok
Theme & Template: Hello Elementor
Plugins: JetElements, JetBlocks, JetBlog, JetEngine, JetMenu, JetPopup, JetTabs, JetTricks

Check the live website

Bike&Ski

Bike&Ski is a bike and ski rental site for active sports enthusiasts. The site explains the specifics of extreme sports through several videos, a dynamic testimonials section, and a listing grid. 

You can find a search bar at the very top to quickly find the information you need.

Developer: Thomas Göschlberger
Theme & Template: Hello Elementor
Plugins: JetEngine, JetReviews, JetSearch, JetTricks, JetFormBuilder

Check the live website

Coclear

Coclear is a business card website for a center that helps people solve hearing problems. Here, users can book a visit to a specialist, learn about different symptoms, and find information about hearing aid disorders. 

The site utilizes several Crocoblock plugins and widgets. One such widget is Tooltip from JetTricks. It helps to create tooltips and attach them to a specific place on the site. 

On Coclear, the tooltips are applied to the grid of different hearing tests.

Developer: Samir Haddad
Theme & Template: Coclear Theme
Plugins: JetEngine, JetSmartFilters, JetTricks

Check the live website

JoyRyde

The JoyRyde website is dedicated to electric bike rentals and allows you to choose different options at the right price. 

Right below the hero image on the homepage, there is a search form with JetSmartFilters inside, which allows you to look for available bikes for a chosen date.

Developer: Binh Nguyen
Theme & Template: Hello Elementor
Plugins: JetEngine, JetSmartFilters, JetFormBuilder

Check the live website

FAQ

Final Words

Creating a user-friendly appointment website is crucial to increasing sales, customer delight, and the brand’s digital presence. 

You have seen some great appointment websites for different niches sporting many different elements. I hope you find them inspiring. 

You can use ready-made templates if you are not ready to develop a website from scratch but still need one very quickly to be adequately designed and pre-coded. 

Feel free to experiment and get the results you want.

The post 8 Great WordPress Appointment Websites Built With Crocoblock appeared first on Crocoblock.

The JetSearch plugin has been there for a while, improving the user experience by adding AJAX functionality and quick, customizable result previews, sorting, etc. But now is the perfect time to spice it up with new AI functionality and make it even more powerful and user-oriented. 

In this article, I will talk about our experiments in implementing Open AI to WordPress search, the pitfalls, and the successes we achieved.

Table of Contents

• Experiments with WordPress and Open AI
  • Open AI Embeddings for WordPress search
• WordPress Native vs. AI-Driven Search
  • Typos in search
  • No typos in the search
• Drawbacks of WordPress AI-Powered Search
• AI Seach Experimental Plugin
  • Advanced usage: search by custom fields
• FAQ
• Takeaway

Experiments with WordPress and Open AI

Our first implementation of AI into one of our plugins was adding it to the Query Builder tool of JetEngine to generate SQL queries. But this is a job for generative AI – when it creates things from scratch – while for handling search, we need it to work with existing data for handling searches. 

In our case, we initially wanted to improve search results for our Help Center (Knowledge Base) because there are tons of information, and it would be great if users could always find exactly what they need without making much effort. Our clients sometimes have to ask support agents about things that already exist in documentation; thus, there’s a space for improvement. 

We planned to release the AI search functionality and offer it to our clients as soon as we implemented and tested it. We’ve actually succeeded and are now in a phase of active testing of the experimental plugin. 

I will talk you through our development process while creating this plugin. 

Open AI Embeddings for WordPress search

Open AI official documentation suggests using Embeddings for search. It allows you to analyze the text that you give it and generate a mathematical vector – which is a sequence of numbers. Hence, we can give this model a large volume of information, get its representation in vector format, save it, and then compare specific vectors. 

This was the general explanation. Now, I will break it down into points and tell you what exactly we have done and how this logic works. 

1. Splitting the Knowledge Base content into fragments.
2. Then, using the Embeddings API to convert them into vectors.
3. Saving the vectors in the website database.
4. Creating a search interface where users will type their search requests.  
5. Converting the user’s request into a vector as well (using Embeddings API).
6. Comparing the users’ request vector with the existing vectors of the text fragments from our database. At this point, we sort all of these fragments using mathematical methods to find the most similar matches. 

Hence, the most similar vectors will be the text fragments most relevant to the user’s request. 

All that remains is to deliver a predefined number of these fragments to the front end in the order of relevance, with the links leading to our website’s corresponding section. In simple words, display the search results. 

WordPress Native vs. AI-Driven Search 

AI improves WordPress search, and I will demonstrate this in the upcoming section. 

Typos in the search 

If there’s a typo in WordPress native search, it will simply not show any results. For example, I’ve made a typo in the word “sweater” and typed “seater with voluminous sleeves.” These are the results of the native search. As you can see, nothing was found.

Now, I’ve activated the experimental Jet AI Search plugin and used the same search request with the same typo. Look at the difference – all the existing sweaters with voluminous sleeves were found, plus a blouse with voluminous sleeves. Quite a difference, isn’t it?

This experiment shows the difference in how the native and AI-powered search works:

• WordPress native search tries to find the exact match of the search phrase in the website’s database. It means you will get zero results if you make the slightest spelling mistake in one of the words.
• AI-powered search can understand the context because it works with vectors, so it’s not sensitive to typos.

Obviously, it’s a huge advantage.

No typos in the search

Now, let’s check how native and AI-powered searches perform if there are no typos in the request. I’ve used the same phrase, “sweater with voluminous sleeves.”

The screenshot below shows that it found two relevant products but then offered completely irrelevant home pages.

Now, look what AI-search did: it suggested the same two completely relevant products, plus all the sweaters and everything with voluminous sleeves, which is great for good customer experience and upsales. 

To sum it up, it would be fair to say that the results of a native WordPress search without a typo are worse than the results of an AI-powered search, even if there’s a typo in the request. Pretty impressive!

Drawbacks of WordPress AI-Powered Search

We face a few challenges when implementing AI into a WordPress search. Mainly, it’s all about resources. 

Open AI Embeddings API generates quite big vectors, and it requires resources to process them, especially if we are talking about PHP, which is not well-adapted to such tasks. This leads to a reduction in the speed when working with large volumes of content.

So, if your site is quite small, our AI search tool will work at a normal speed. But on large volumes of content, it slows down exponentially. 

The second challenge is operational logic. To get relevant results, you should break content into fragments properly. The fragments should not be too long (because the search requests are not long, and they should match). 

At the same time, if the fragments are too small, they might lose any meaning – and the search results will not be relevant because they will not reflect the meaning but just match a set of letters. 

There are two potential solutions: the first is to use another tool that generates smaller vectors than Embeddings. However, the search accuracy will be lower because of this. 

Another solution is to use a SaaS model where data storage and request processing will be carried out by more suitable tools for users while the web interface works as an API for indexing site content and searching for that indexed content. 

As a result, we will get the same results but faster and by using fewer resources. 

If you want to learn more details, watch the talk of Andrew Shevchenko, Crocoblock’s CTO, about the development of the AI search. Also, check out the live chat discussion, where people shared their thoughts and ideas on this topic.

AI Seach Experimental Plugin

You can download the plugin from our GitHub repository, test it, and even use it on the production site. All you need to have is some money on the Open AI account to perform searches. 

The interface is pretty straightforward; its settings are on Dashboard > Settings > AI Search. 

You can leave default Working Mode settings, but you definitely need to set the post types you want to be auto-fetched and fetch content for the first time in the Fetch Content tab. After that, you will see the posts being added to the Fetched Content Statistics. 

If you want to try how this plugin works on a live site, check out the JetFormBuilder site and how it performs search in the documentation. It’s strongly recommended to use the Crocoblock JetSearch plugin powered by AJAX and see results on the same page, right under the search field.

Advanced use: search by custom fields

This code snippet allows you to add values from meta fields to parsed content fragments. By using it, you can perform the AI search in the selected custom fields, not only posts content or excerpts.
Don’t forget to change the names to match the names on your website. After adding this code, you need to re-fetch the corresponding post type’s content to ensure new fragments are stored in the database.

add_filter( 'jet-ai-search/post-fragments', function( $fragments, $post, $parser ) {

	// Optional part - making sure we work with posts of need type
	if ( 'product' !== $post->post_type ) {
		return $fragments;
	}

	// Getting field value
	$field_name = 'description-for-the-search';
	$custom_description = get_post_meta( $post->ID, $field_name, true );

	// If value is empty - nothing to do here
	if ( ! $custom_description ) {
		return $fragments;
	}

	// Reset previously parsed stack and store new fragment
	$parser->reset_results();

	$parser->set_stack_defaults( [
		'post_id'    => $post->ID,
		'post_url'   => $post->guid,
		'post_title' => $post->post_title,
		'source'     => $post->post_type,
	] );

	// Optional - store post title with field value for better context
	$title = $parser->prepare_heading( $post->post_title );

	$fragment = $parser->prepare_fragment( $custom_description );

	$parser->stack_result( [
		'fragment' => $title . $fragment
	], true );

	// Merge stored fragment with all previous fragments
	$fragments = array_merge( $fragments, $parser->get_result() );

	return $fragments;
	
}, 10, 3 );

FAQ

Takeaway

In this article, I’ve talked you through the process of developing the experimental plugin for an AI-powered search for WordPress websites, showed how it works, and why such enhancements are so important for almost any project.  

Feel free to test the plugin on your website and give feedback on GitHub or in the comments below.  

The post AI-Driven WordPress Search by Crocoblock appeared first on Crocoblock.

Table of Contents

• Essential Factors for Building Websites for Non-Profit Organizations
• 10 Non-Profit Website Examples Made With Crocoblock
  • Christen an der Seite Israels
  • SheSapiens
  • Mesa Sport
  • OWLAG
  • UNA
  • Rabbi Dudi Braverman
  • Memory Trees
  • Сhildren & War Foundation
  • Cânions do Sul Geopark Project
  • Manizales Cómo Vamos
• Summary

Essential Factors for Building Websites for Non-Profit Organizations

When building websites for non-profit organizations, several important factors should be considered to ensure they effectively serve the organization’s mission and engage visitors. These factors include:

• Effective search instruments. Non-profit websites often store substantial amounts of data, such as reports, surveys, and historical information. Implementing robust search tools, like AJAX search and filtering options, is crucial for users to find the information they need quickly.
• Efficient navigation. Non-profit organizations are usually involved in numerous activities, requiring many website pages. A well-structured and intuitive navigation system is essential for visitors to access various sections and content easily.
• Optimal content layout. Non-profit websites need to showcase their events effectively, display the results of their work, and share their mission and impact in an engaging and organized manner. Proper content blocks and layouts are critical for presenting this information attractively and informatively.
• Engaging design. A visually appealing design is essential to captivate visitors and encourage them to read and engage with the content. Design elements can help convey the organization’s message and impact effectively.

10 Non-Profit Website Examples Made With Crocoblock

I sourced the best non-profit WordPress websites from a library of sites built with Crocoblock tools. Undoubtedly, WordPress is an excellent platform for constructing such websites. However, as you will notice, using JetPlugins enhances websites in various ways.

Christen an der Seite Israels (CSI)

Developer: Urban Xperience
Theme & Template: Hello by Elementor
Plugins: JetEngine, JetElements, JetBlocks, JetSearch, JetSmartFilters, JetTabs, JetMenu, JetTricks

Check the live website

The website represents the activities, projects, and plans of a group of Christian volunteers. They are involved in various cases of assisting Israelis who have suffered from the consequences of war or have been forced to migrate. The group’s activities include managing donations in Ukraine, spreading information about the Holocaust, and more.

The best part about the CSI website is that it features tons of information, as the volunteers are involved in multiple projects. At the same time, the website stays updated and follows both the volunteers’ activities and related world news. Yet, the website design is clean; it features a lot of white space and is easy to navigate.

Employing several Crocoblock tools enhances website usability and a sleek look. The JetMenu’s Mega Menu widget provides a convenient navigation bar that grants access to different sections of the website. Hovering over each of the page labels reveals many options and a brief description of the content on the page. Another space-saving trick is the integration of JetTrick’s Read More button, which expands to display additional information for interested visitors while keeping it hidden from those who may not want to see it.

The website creators used JetSearch and JetSmartFilters plugins to provide fast site-wide search and easy navigation through the “Shop” page items. Notably,  they styled the standard radio filters as buttons, and when combined with the AJAX reload feature, it resulted in a distinctive user experience.

SheSapiens

Developer: Julia Muxinach
Theme & Template: Hello by Elementor
Plugins: JetElements, JetSmartFilters, JetTricks, JetTabs, JetEngine, JetReviews

Check the live website

SheSapiens is an online community run by women for women. On this platform, visitors can find discussions related to feminism and female studies through blog articles and information about future and past workshops, online events, group gatherings, and more. 

The website features a calm color palette and a simple but elegant design. The vertical navigation menu on the left side of the screen provides a modern look. At the same time, the full-screen background video on the home page successfully conveys the feeling of a vibrant and active community. 

The “Blog” and “Team” pages showcase numerous posts in a grid layout. To add dynamic functionality to the elements within the grid, several JetEngine widgets were used, notably Listing Grid and Dynamic Link. The blog posts are easy to find thanks to the JetSmartFilters plugin, which has multiple topic- and style-related tags. By default, the filtering options are concealed within an accordion layout, which users can open with a toggle. This functionality, provided by the JetTabs plugin, streamlines website design and enhances user experience. 

Mesa Sport

Developer: Dropmonkey
Theme & Template: Hello by Elementor
Plugins: JetSmartFilters, JetEngine, JetSearch, JetReviews

Check the live website

Mesa Sport is one of Rotterdam’s best boxing schools, known for shaping Olympic medalists and Dutch champions. With a relaxed family atmosphere, they offer support in achieving fitness goals. Their website amplifies the importance of balance, strategy, and technique in boxing. These and other sports-related topics are highlighted by multiple images and success stories of the school’s graduates. 

The website design is simple, featuring image and text blocks scrolling over a plain gray background. Smooth scrolling is facilitated by the JetElements Parallax widget, allowing users to navigate to the bottom of the longest page on the website with a single gesture.

Visitors can also shop for sports equipment on the dedicated page. On a product’s single page, the JetReviews plugin ensures that visitors can leave reviews and utilize the star rating system, making their reviews visible on the front page for future buyers to see.

OWLAG

Developer: Lethabo Mashike
Theme & Template: Hello by Elementor
Plugins: JetElements, JetSmartFilters, JetTabs, JetSearch, JetEngine, JetMenu, JetPopup

Check the live website

This dynamic website showcases the activities of the Oprah Winfrey Leadership Academy for Girls in South Africa. It utilizes various tools, creating an appealing, dynamic, and highly functional design. 

While scrolling, content blocks animate with varying speeds, including sideways movement and fading in, achieved through the JetElements Section Parallax widget, imparting a sense of depth to the screen. Zoom-in animations enhance the appearance of pop-ups (JetPopup), demonstrating attention to detail.

Tabs and Switcher widgets (JetTabs) impressively organize extensive content on a single page while maintaining a clean design. The “Academics” page exemplifies how these tools establish a three-level media library hierarchy. Furthermore, many content blocks feature a “Read More” button (JetTricks) for users seeking specific information.

Notably, the navigation menu, created with the JetMenu plugin, deserves mention. This plugin enables the creation of mega menus with diverse content, including text, icons, images, and videos. In this case, the menu dynamically displays information about school students in a carousel layout, adding to the website’s overall functionality and aesthetics.

UNA

Developer: Ideals Interactive
Theme & Template: Kadence
Plugins: JetSmartFilters, JetSearch, JetEngine

Check the live website

UNA is the website representing “the largest and most important university in Paraguay.” Its design is strict and well-suited for an academic website, featuring a plain white background with a corporate dark red color. The homepage showcases images of the campus and sample posts from various site sections.

To display post thumbnails on the pages, developers used JetEngine’s Listing Grid, ensuring uniform presentation of new posts with information from selected meta fields (Dynamic Field widget). 

Overall, the website prioritizes functionality over visual additions. There aren’t any animations or moving parts, with the only exception being color-changing buttons for enhanced usability.

The primary focus is searchability, with an excellent AJAX search function (JetSearch plugin) providing real-time results as you type only two characters in the search field. Results are displayed in a paginated layout with navigation buttons, making content easily accessible.

Rabbi Dudi Braverman

Developer: ISL DESIGN
Theme & Template: Hello by Elementor
Plugins: JetSmartFilters, JetSearch, JetEngine, JetMenu

Check the live website

This website offers an impressive collection of video lectures by Rabbi Dudi Braverman, sharing Jewish wisdom on various topics. 

The site’s appearance is truly distinctive. Upon visiting the homepage, users encounter a navigation menu with a search field, a breadcrumbs section with a brief site description, and post thumbnails taken from various subpages – and that’s it. There’s no attempt to embellish the pages; the main design effort was likely choosing the menu section’s background color (gray). However, this minimalist approach provides a unique aesthetic that allows visitors to focus on the lecture content.

Like other websites in this article, this site utilizes JetEngine’s Listing Grid to display posts in various layouts, including grids, carousels, and sliders. JetSearch and JetSmartFilters are employed to facilitate effective navigation through hundreds of posts. 

Memory Trees

Developer: Alex Player
Theme & Template: Buddyboss
Plugins: JetSmartFilters, JetSearch, JetEngine, JetMenu, JetBlocks

Check the live website

Memory Trees by the Forest of Memories is an online platform managed by a non-profit organization with the mission of planting trees in memory of UK citizens who lost their lives due to COVID-19. The website hosts a unique collection of personal profiles, enabling anyone to share memories of the departed.

This platform boasts an elegant, spacious design, making it easy to read and navigate, particularly for senior visitors. It features large icons and clear descriptions. The search filter is user-friendly, offering alphabet list buttons (Alphabet Filter widget) and an AJAX search field for simplified searching.

For a straightforward login page, the website employs a Login Form widget. This pre-designed template, part of the JetBlocks plugin, includes options for Google and Facebook login buttons.

Сhildren & War Foundation

Developer: Sommerseth Design AS
Theme & Template: Astra
Plugins: JetSmartFilters, JetSearch, JetEngine, JetMenu, JetBlocks

Check the live website

The Children and War Foundation is a non-profit organization committed to enhancing the lives of children affected by wars and disasters. Their website stands out with a unique design featuring ample white space and monospace black-and-red fonts. Paired with imagery depicting the harsh reality of war and disasters, these design choices evoke strong and impactful emotions.

The “News & Events” page offers a search function powered by Crocoblock’s JetSearch plugin. Notably, search results not only display by name but also feature thumbnails of related pictures. Additionally, the site employs other Crocoblocks tools like JetTabs and JetBlocks plugins to improve the content layout.

Cânions do Sul Geopark Project

Developer: Johan Karl
Theme & Template: Custom
Plugins: JetSmartFilters, JetEngine, JetElements

Check the live website

This website represents the UNESCO World Geopark Caminhos dos Cânions do Sul, located in the southern part of Brazil. Upon entering the site, you’re immediately greeted with stunning images of waterfalls and canyons. These visuals are creatively presented in various forms and scattered across the white background, providing a browsing experience reminiscent of flipping through the pages of a book and encouraging exploration.

Most webpages feature content sourced from dynamic posts, displaying dynamic and interactive elements that update automatically based on post content. These dynamic post features are made possible by the JetEngine plugin. The website showcases the usage of Listing Grid and Dynamic Repeater widgets, and some posts are displayed in attractive slider layouts created with the Slider widget (JetElements). Additionally, on pages with many posts, the website utilizes JetSmartFilters’ Pagination widget to ensure easy and convenient browsing.

Manizales Cómo Vamos

Developer: David Ospina
Theme & Template: Hello by Elementor
Plugins: JetSmartFilters, JetSearch, JetEngine

Check the live website

Manizales Cómo Vamos is a non-profit organization dedicated to monitoring and evaluating the quality of life and actively contributing to social awareness in Colombia. They regularly organize online events, produce reports, conduct surveys, and more, with a website equipped with the essential functionalities for storing data and displaying the results of their work.

The website’s appearance is fitting for an organization involved in various activities, featuring content extracts from multiple web pages presented on the homepage through the JetEngine plugin. The homepage also hosts a dynamic events calendar powered by the Calendar widget, allowing visitors to access details about upcoming events easily.

To navigate through its extensive data library, the website employs a filtering tool (JetSmartFilters) that appears in a side panel when users click the zooming button in the top page panel. This filtering system, which includes Date Period, Select, and Search filters, enables visitors to quickly find relevant reports or events, which are then displayed on separate pages for easy access.

Summary

As evident from the list of websites, the best non-profit WordPress websites prioritize functionality and effectiveness. These websites, representing organizations from around the world, harness the power of WordPress for their purposes, with Crocoblock plugins being a common choice. Several Crocoblock tools were consistently employed, highlighting their effectiveness in constructing non-profit WordPress websites.

JetEngine plays a crucial role in presenting various post types on the front end, enabling the creation of interactive and dynamic elements that automatically update.

For non-profit organizations, providing effective search tools for their site visitors is essential, especially when dealing with substantial amounts of data, such as reports and survey results. JetSearch and JetSmartFilters offer filtering facets to categorize content and enhance search, delivering instant results.

Other popular JetPlugins for non-profit WordPress websites include JetMenu, which helps build a convenient navigation system, and JetTabs and JetElements, contributing to enhanced website design and functionality. These plugins collectively contribute to creating user-friendly, dynamic, and information-rich websites.

The post 10 Non-Profit Websites Built With Crocoblock appeared first on Crocoblock.

Crocoblock offers many features and functionalities to help you design and customize rental websites that meet your specific requirements. This article will explore some of the best WordPress rental websites. Whether you’re looking to create a rental site, Crocoblock provides the tools to turn your vision into a reality.

Table of Contents

• Special Mention: Dynamic Templates for Rental Websites
  • RentGo
  • BaliRento
• Property Rental Websites
• Transport Rental WordPress Websites
• Vacation Rental Websites
• FAQ
• Last Words

Special Mention: Dynamic Templates for Rental Websites

Creating a rental website can seem daunting. Because such a site should have many elements:

• image and description of the booking/rental options;
• ability to create catalogs;
• filters and search tools;
• ability to choose a convenient date and time;
• calendar with available dates;
• ability to customize the map.

You can implement all these features by writing code or using different WordPress plugins. But suppose you are not ready to spend much time and effort. In that case, you can use ready-made dynamic templates that are easy to customize in terms of design and functionality – for example, RentGo and BaliRento from Crocoblock.

RentGo

RentGo is a rental website template that is great for creating car rental websites. It contains nine Crocoblock plugins. With their help, you can quickly create single pages and catalogs without coding and design them as needed.

The template has the following functionality:

• custom post types and custom fields;
• single post templates;
• pre-designed page templates for single vehicles and catalogs;
• six taxonomies for displaying necessary options through dynamic widgets (genres, color, state, body type, class, location);
• built-in advanced filters and a search tool;
• Listing Grids for “Search Results,” “Get Our Rental Cars,” and other content groups needed;
• booking functionality.

You can install this car rental template on a WordPress website, configure the necessary style settings and parameters, provide additional information about the vehicles, and allow users to choose the ones they like. All template components are fully customizable.

BaliRento

BaliRento is a vacation rental template by Crocoblock. It contains 11 plugins, and you can create a powerful, functional website without coding. The template saves you time on manual page and post creation and provides the tools for efficient website building. So you can make any design and functionality quickly and easily.  

Let’s take a closer look at BaliRento functionality:

• customizable single page templates for showing property details;
• custom fields and custom post types;
• taxonomy terms for payments, meals, and property types;
• listing grids for “Similar Villas,” “Most Popular,” and other content groups; 
• inbuilt advanced filters and a search tool;
• extra filtering features: pagination, search button, additional providers, indexer;
• profile builder;
• WooCommerce integration;
• Map Listing;
• Dynamic Visibility and Query Builder for advanced data fetching and output.

Booking and rental websites fall into the complex category, but still, they must work quickly and conveniently. Luckily, with ready-made templates, you can significantly speed up their creation and get the desired result.

Property Rental Websites 

Mathieu Immobilier & Conseils

The first site is dedicated to renting and purchasing real estate in France. Here, customers can find houses and apartments of different levels and prices.

To prevent the user from getting lost in the variety of choices, the developers added a filtering tool created with JetSmartFilters.

Such a filter allows users to select a suitable city, budget, area, and number of rooms and see only those options that suit them. It saves time and makes the site more functional when choosing housing.

Developer: Vincent Delhaye
Theme & Template: Bricks
Plugins: JetSmartFilters

Check the live website 

Cape Managed

The next website is dedicated to housing rentals in Cape Town. The central part of the welcome screen is reserved for a quick search, where, just like in the first example, you can filter the housing options by the number of rooms, check-in and check-out dates, and the number of guests. These filters help the user quickly find what they need.

Also, the site logo in the header was added using a JetBlocks widget, and the navigation menu was built with JetMenu.

Below is a field created using JetEngine. Here, you can see the created Listing Grids, dynamic data, clickable taxonomy tiles, sliders, and more.

The site design is minimalistic, but it is fully functional. The users can quickly find suitable accommodation and save it to their wishlist.

Developer: Woolf’s Media Design
Theme & Template: Hello Elementor
Plugins: JetSearch, JetBlocks, JetBlog, JetCompareWishlist, JetElements, JetEngine, JetMenu, JetReviews, JetPopup, JetTabs

Check the live website 

Augusta 29

Augusta 29 is a WordPress site dedicated to office rentals in Barcelona. It offers different meeting rooms, virtual and land-based offices, and coworking.

There is a JetEngine-built block created using Listing Grid. It is a listing template showcased as a grid and showing dynamically changing data.

There is a navigation menu from JetBlocks in the header. It helps to navigate the website quickly and looks great.

Developer: Samir Haddad
Theme & Template: Hello Elementor
Plugins: JetBlocks, JetEngine

Check the live website 

Transport Rental WordPress Websites

Star Kar

The next site on the list offers users the opportunity to find a new/used car.

Star Kar generously uses the parallax effect, which helps to scroll through the website smoothly. The car selection page has a sticky filter panel made using JetSmartFilters widgets.

It is very convenient for users because they can change the parameters they are looking for at any time and select the appropriate vehicle.

Developer: BDZlab
Theme & Template: Hello Elementor
Plugins: JetBlocks, JetElements, JetEngine, JetMenu, JetPopup, JetReviews, JetSearch, JetSmartFilters, JetTabs, JetTricks, JetThemeCore

Check the live website 

JoyRyde

JoyRyde is a website dedicated to bike rental. Here, you can see different types of electric bicycles and choose the right one. For convenience and speedy search, you can use the quick search tool on the welcome screen hierarchical filters inside.

After selecting the appropriate bike option, the user must fill out a booking form created using JetFormBuilder. Here, the user is asked to provide contact information, choose rental dates, and select additional services if necessary.

Developer: Binh Nguyen
Theme & Template: Hello Elementor
Plugins: JetBooking, JetEngine, JetFormBuilder, JetSmartFilters

Check the live website 

Exotic Auto Club

The next website on the list is dedicated to exotic car rentals in Sydney. It looks stylish, sporting videos and dynamic elements throughout the site.

Here, a quick search on the homepage helps users select the desired car brand. Next, there is a listing grid featuring car options and a JetWooBuilder-built gallery, helping to view the car from different angles and choose the right one.

Developer: Ryan Chang
Theme & Template: Ryan Chang
Plugins: JetEngine, JetElements, JetBlocks, JetSmartFilters, JetTabs, JetProductGallery, JetMenu

Check the live website 

Vacation Rental Websites

Royal Cliff

Royal Cliff is a 5-star hotel website that allows you to book high-quality oceanfront vacation spots.
On the welcome screen, there is a slider featuring photos taken on the hotel premises. It is made using JetElements. The navbar in the header is made using JetPlugins, too.

Developer: Gun Kimsong
Theme & Template: Hello Elementor
Plugins: JetEngine, JetElements, JetBlocks, JetSmartFilters, JetCompareWishlist, JetPopup, JetFormBuilder, JetMenu, JetTricks 

Check the live website

My Blue 4 You

The My Blue 4 You website offers yacht chartering services and tours around the world. 
To make the yacht search convenient, the developers have added a quick search bar from JetSearch. Below are popular destinations presented as a convenient listing grid.

Developer: Andrea Sorrentino
Theme & Template: Hello Elementor
Plugins: JetElements, JetSmartFilters, JetTabs, JetBlocks, JetSearch, JetEngine, JetReviews

Check out the live site

Go Safari

This site is dedicated to one of the most exciting leisure – safari. You can choose which African country to visit and book the next adventure there. 

On the website, you can see a JetMenu-built menu; it is responsive and looks different on different devices.

Developer: Selfmade
Theme & Template: Hello Elementor
Plugins: JetElements, JetSmartFilters, JetTricks, JetMenu, JetEngine

Check out the live site

If you want your WordPress website to be included in our Made with Croco selection, do not waste time and submit it here.

FAQ

Last Words

Rental websites are convenient resources that help users book services, vacations, transportation, and experiences.

In this article, I’ve enumerated and described some interesting rental websites made with JetPlugins by Crocoblock. Their functionality allows you to create any website you can imagine. And ready-made dynamic templates simplify the task even more.

Have you already tried to build a rental website? Did you use a dynamic template for it? Feel free to share in the comments.

The post Top 9 WordPress Rental Websites Built With Crocoblock  appeared first on Crocoblock.

Often such thoughts crash against the wall of reality. You could have missed something, didn’t add the necessary functionality or feature somewhere, and the visitors would flow away from your resource like water running through fingers.

But the only thing that stands between you and your dream is the will to try and the belief that it is actually possible to create a successful website.

In this article, I have collected some great examples of websites made with Elementor and JetPlugins for different niches.

Prepare your notebooks, as you will likely find many interesting ideas for yourself.

Table of Contents

• Top 9 Photography Elementor Websites
• Top 10 Elementor Portfolio Websites
• Top 11 Marketing and Ecommerce Elementor Websites
• Top 5 Travel Elementor Websites
• Top 5 Educational Elementor Websites
• FAQ
• Last Words

Top 9 Photography Elementor Websites

One of the most popular categories for Elementor sites is business card websites advertising photo and video services. Because Elementor allows you to beautifully and concisely show creative work on the site and add all the essential information.

Dreamshoots

The first site is dedicated to photos in a flying dress in the Dubai desert—every second person who comes to Dubai dreams of such a photo shoot. Therefore, the task of the site is to show the work of photographers and dresses, convey the atmosphere and tell all the information necessary for booking.

This site uses the JetElements plugin and parallax layout. For example, here is this section with the work of a photographer made using JetElements:

Developer, Theme & Template: Bydoweb
Plugins: JetEngine

Check out the live site

Misha Obradovic

The following site is a portfolio of fashion photographer Misha Obradovic. To showcase his work, he created a dynamic website where his works are presented in a masonry grid where each item shifts a bit after you hover over it. It certainly draws attention. The effect used is parallax; when you don’t move the mouse, the grid moves up and down. 

Clicking on a photo takes you to a page created with JetEngine. And here, you can find an infinite scroll: moving images keep loading up as you scroll down the page.

Developer, Theme & Template: General Condition
Plugins: JetEngine, JetTabs, JetTricks

Check out the live site

J.Blackeye

A web designer’s website should look vibrant, reflect their personality style, and showcase their work. A great example would be the J.Blackeye website. It looks very professional:

Some photographers and designers prefer to post on social media, then integrate their Instagram page into their website. In this variation, the Instagram page is added using JetElements.

Developer, Theme & Template: J.Blackeye
Plugins: JetElements, JetTricks

Check out the live site

Portraits Made in Germany

The website is dedicated to portraits and atmospheric photography. Portraits Made in Germany look very aesthetic, thanks to photographers’ exceptional skills and creative web design. On the website, you will find not just photos but also valuable materials such as location overviews, books, magazines, and podcasts about photography.

For the visitor to smoothly move from category to category, the site has a parallax effect, and there is also a Listing Grid with the latest events made using JetEngine.

Developer, Theme & Template: luckyCONCEPT
Plugins: JetElements, JetTricks, JetEngine

Check out the live site

Beyond Destiny

This Elementor website dedicated to beautiful wedding photography will satisfy you thanks to aesthetic photos, functionality, and convenient design. You can see the works on the site, find helpful information, and book a photographer.

The use of JetPlugins played a significant role in the site’s aesthetics. With their help, it became possible to create a Listing Grid in a slider format and apply a parallax effect to it. 

Developer, Theme & Template: Inside Space
Plugins: JetEngine

Check out the live site

Mimoments

The following website made with Elementor website builder is the one of a wedding videographer, where you can see her many works. The hero section contains a short video sequence, so the site looks alive and dynamic. The developers used the Listing Grid, made with JetEngine, to create easy-to-update content.

Developer, Theme & Template: Wzór Agencję UX
Plugins: JetEngine, JetElements

Check out the live site

Zambrycka.art

The following site in my selection is also dedicated to the work of a Polish photographer. You can see many engaging elements added using JetPlugins, including a menu on the main screen made with JetMenu and a search bar added with JetSearch.

The photographer offers various photo formats as indicated in the Listing Grid right after the header section. Further, you can find her portfolio and a contact form – everything you need to start cooperation.

Developer, Theme & Template: Thomas Anderson
Plugins: JetBlocks, JetBlog, JetElements, JetMenu, JetSearch, JetTabs, JetTricks

Check out the live site

Hallie Golden

Hallie Golden is a journalist and photographer with a website dedicated to her work. It uses a large number of JetPlugins that complement the functionality of Elementor. Here you can see publications that Hallie writes, journals with which she works, a photo gallery, and a testimonial section made with JetElements.

The Elementor website design has soothing colors and everything you need to get familiar with the author’s work.

Developer, Theme & Template: Papersky
Plugins: JetPopup, JetBlog, JetElements, JetEngine, JetReviews, JetSearch, JetSmartFilters, JetTabs, JetTricks

Check out the live site

Ombres et Lumières

For many sites and businesses, the ability to create user profiles and various forms is essential. JetPlugins also help with this. On this photography website, you can find a handy user login form made with JetFormBuilder.

Developer, Theme & Template: Eric Wayaffe
Plugins: JetFormBuilder

Check out the live site

Top 10 Elementor Portfolio Websites

Elementor and JetPlugins help you create more than just photography websites. Let’s look at some attention-worthy portfolio websites.

Skaneando

The first on the list is a site offering apartments and furniture selection. It lets users order various services, from creating a room plan and 3D furniture model to a special visualization for selling real estate.

This Elementor website involves a lot of different JetPlugins. So at the top, you can see the Auth Links widget from JetBlocks, which allows users to register or log into their account using simple and noticeable details.

The second interesting element is the Image Comparison from JetElements. It helps site visitors spot changes in a single image by dragging a slider left and right.

Developer, Theme & Template: Skaneando Studio
Plugins: JetAppointment, JetBlocks, JetElements, JetEngine, JetFormBuilder, JetMenu, JetSearch, JetTabs, JetThemeCore, JetTricks

Check out the live site

UXD

On the following website, UXD, you can find many ideas on using concise animation elements to make the website look attractive and informative.

The first thing to notice here is the Inline SVG widget. The developers used it to present the logos of client companies in a concise grid. When hovering, the logos move behind the cursor. It is made with JetElements’ parallax section.

Additionally, you can notice here the following: 

• Animated Text at the top of the screen. It brings the site to life and makes it dynamic without video or special effects.
• Scroll Navigation, created with JetElements. It lets you quickly navigate the site section using the dots on the side or simply scrolling. 

Developer, Theme & Template: Urban Experience
Plugins: JetElements, JetEngine

Check out the live site

Eli Kony

This interesting Elementor site received the Site of the Year award from Crocoblock, and I’m sure it deserves special attention.

You can find many inspirational ideas on the Eli Cony website. It sports a dark color scheme and many dynamic elements. Non-standard elements make the site lively, attracting attention and making you want to study every detail more.

For example, a Listing Grid made with JetEngine might present dynamic posts like this:

All “Go to Project” buttons are added using the JetElements plugin widget.

Developer, Theme & Template: Eli Kony
Plugins: JetElements, JetEngine, JetBlocks

Check out the live site

MAR PLA

The following elegant website is dedicated to psychology and coaching. It employs soothing colors and the parallax effect.

Navigation is convenient; users can find all the necessary information in minutes.

You can find a listing slider made with JetEngine on the main page. When you click the picture/title on the tile, you’ll be taken to helpful posts.

Developer, Theme & Template: WEB 22MW
Plugins: JetElements, JetEngine, JetBlocks

Check out the live site

Beatfreeks 

The following website is dedicated to youth culture and learning. Here users can find a lot of valuable materials about the collaboration of brands with Generation Z.

You can find various elements made with JetEngine and JetElements on the website.

For example, here is this Listing Grid with the latest news. It is very convenient that the Listing Grid collects the necessary dynamic data and displays it in a suitable format.

Developer, Theme & Template: Beatfreeks 
Plugins: JetElements, JetEngine

Check out the live site

SEO Agentuur

It is a two-page site dedicated to one SEO studio. On it, you can get to know the studio’s specialty and read valuable SEO materials.

Considering JetPlugins’ usage, there is a navigation menu from JetBlocks at the top of the web page. It looks neat and helps to navigate the website quickly.

Developer, Theme & Template: Kristjan Sepp
Plugins: JetBlocks, JetBlog, JetElements, JetTabs, JetThemeCore

Check out the live site

Devitus Digital

Devitus Digital is a web studio site where you can find their works and enjoyable information about their creation.

Here are some JetPlugins-built elements you might like. Firstly, the site is designed with a parallax effect, so the navigation looks smooth. You can also see the testimonials section added using JetElements.

Developer, Theme & Template: Devitus Digital
Plugins: JetElements, JetTricks, JetTabs

Check out the live site

Isiah Obera

Developers and designers try to show their work from different angles and stand out from the crowd. Therefore, the same elements made with the exact tools can look so different. On Isiah Obera’s website, you can see another way to implement the parallax effect, listing grid, and various buttons.

Developer, Theme & Template: Isiah Obera
Plugins: JetElements, JetThemeCore, JetEngine

Check out the live site

Ursuta and Asociatii

All websites on the list showcase creative ways to mix and match JetPlugins and Elementor widgets. But that’s not all one can do with these tools. This legal agency website, for instance, has a team members section added with JetElements.

A headshot, a name, and a short bio allow for getting acquainted with each team member. However, the widget does not limit you and makes it possible to add more information about each employee if needed.

Developer, Theme & Template: CIPRIAN PENTELESCU
Plugins: JetElements, JetMenu, JetBlocks, JetEngine

Check out the live site

On The House Digital

Another studio’s website completes my list of Elementor portfolio sites. It is built with several JetPlugins, too. Listing Grid is one of the most popular elements it features. It helps to show all the necessary information compactly so that users can quickly read everything they need.

Developer, Theme & Template: ISL DESIGN
Plugins: JetSmartFilters, JetMenu, JetTabs, JetEngine

Check out the live site

Top 11 Marketing and Ecommerce Elementor Websites

Elementor and JetPlugins are great when you need to show some visual information or when you need to create a website for selling products and services, including marketplaces. In this section, you will see some exciting website examples developed for eCommerce and marketing niches.

Arjan Hofmann

The Arjan Hofmann website presents a marketing agency with many services. It contains many noteworthy elements, including parallax, vibrant images, and animations.

The site looks professional and attractive. Some elements are made using JetPlugins. For example, they used JetElements to build the following section containing brand logos:

The logos are placed neatly so the site visitor can easily read them.

Developer, Theme & Template: Arjan Hofmann
Plugins: JetElements, JetBlocks

Check out the live site

Dias Handmade

The main thing for marketplaces and product websites is beautifully displaying products. It is easy to do with JetWooBuilder. It allows you to set all product parameters and prices in the console and display them conveniently.

Look how it was done on this Elementor website.

Developer, Theme & Template: Chris
Plugins: JetElements, JetWooBuilder

Check out the live site

Pure Essence

The Pure Essence site demonstrates that you only have to use JetWooBuillder or JetElemens to create a beautiful store. Other JetPlugins are also very helpful.

For example, you can see how the JetThemeCore plugin creates a unique webpage layout. This plugin allows you to create a custom page structure, making the finished site look the way you imagined it.

Developer, Theme & Template: DS Enterprise
Plugins: JetElements, JetWooBuilder, JetSmartFilters, JetProductGallery, JetSearch, JetEngine, JetThemeCore

Check out the live site

Timedriven

Watches have always been considered luxury items, so the site where they are sold should look elegant. A great example would be Timedriven.

On a white background, it is very convenient to read the information and examine the watch closely before choosing it. Some website elements employ JetPlugins; for example, navigation links in the website’s header and a Product listing grid.

Developer, Theme & Template: The Weather
Plugins: JetEngine, JetElements, JetSmartFilters, JetAppointment

Check out the live site

Pretty Casual

One of the most valuable features for any store or marketplace is the ability to filter the product range by specific parameters. This feature improves the user experience and helps visitors find exactly what they need.

The Pretty Casual website implements this feature using the JetSmartFilters plugin. Products can be filtered by price, category, size, and color, which is very convenient.

Developer, Theme & Template: Woww Digital
Plugins: JetBlocks, JetElements, JetReviews, JetTabs, JetTricks, JetWooBuilder

Check out the live site

The Mumma Secret

What could be cuter than a homemade candy store? A homemade candy store built with JetWooBuilder. Meet The Mumma Secret, where product pages, including images and descriptions, categories, and a sorting tool, are built entirely with JetPlugins.

Developer, Theme & Template: Thor Solutions
Plugins: JetWooBuilder, JetTabs, JetEngine

Check out the live site

Wood Water

The following Elementor website is an online liquor store. It is made in black and white, making the spirits really stand out. For users’ convenience, the site has a search made using JetSearch. It allows you to find the right product or brand in a few seconds.

Developer, Theme & Template: Thomas Anderson
Plugins: JetElements, JetWooBuilder, JetProductGallery, JetBlocks

Check out the live site

Daily Diva

A convenient and beautiful menu is another vital element for most sites, not just eСommerce. Users often use this section to find the desired information quickly.

On Daily Diva, you can spot an example of a smart-looking navigation menu built with  JetMenu. It looks simple, elegant, and clear.

Developer, Theme & Template: Luan Digital
Plugins: JetElements, JetWooBuilder, JetSmartFilters, JetBlog, JetTricks, JetMenu, JetPopup, JetTabs, JetBlocks, JetSearch, JetEngine

Check out the live site

MiOrganics

Another vital element for WooCommerce projects is a shopping cart. The user should see what they added to the cart, how many items are there, and what they still need to pay for. If you need to create a cart, look at the MiOrganics example. Using JetBlocks, the developers added a cart image and a counter. The cart page layout was created with JetWooBuilder.  

Developer, Theme & Template: Mircea Solomeia
Plugins:  JetBlocks, JetCompareWishlist, JetThemeCore, JetWooBuilder

Check out the live site

Browboss

Browboss is a site dedicated to selling eyebrow care products. When you enter the site, you immediately see a listing grid showing current news and promotions. This method could be very convenient if you are looking for a solution to present the same data to your site visitors.

Developer, Theme & Template: Wilson Wings
Plugins: JetElements, JetSmartFilters, JetWooBuilder

Check out the live site

Modamob

The closing-up website in this category is dedicated to beds. Here you can find many noteworthy elements made with JetElements – for example, navigation links and parallax effects. Also, note the mega menu made with JetMenu and the filtering tool built with JetSmartFilters.

Developer, Theme & Template: Jupiker Internet and Software Services
Plugins: JetEngine, JetElements, JetBlocks, JetSmartFilters, JetCompareWishlist, JetMenu, JetReviews, JetWooBuilder, JetTricks, JetThemeCore, JetProductGallery, JetFormBuilder

Check out the live site

Top 5 Travel Elementor Websites

The next category we will take a look at is travel websites. It is another trendy niche which has its must-haves. Let’s get down to it.

Crown Delta 

The main task of any tourism website is to help you choose the best option for travel: suitable dates, directions, and conditions.

On the Crown Delta website’s welcome screen, you see a quick search tool for selecting suitable dates, created using JetSmartFilters. It is the first thing you pay attention to and the first step to ordering travel.

Developer, Theme & Template: Studio peer
Plugins: JetSmartFilters, JetPopup, JetEngine, JetBooking, JetReviews

Check out the live site

Dia Diem Bao Loc

The following site is dedicated to traveling around the Bao Loc region. Here you can find information about where to go, what to see, and try. Many elements added to the site involve JetPlugins.

For example, the header is made using JetBlocks and the Sticky Section feature. It contains navigation links that help to arrange the content compactly. Next, you see a search bar added with JetSearch. Below the hero section are several listing grids with the most essential travel information.

Developer, Theme & Template: Vinh XD
Plugins: JetSmartFilters, JetBlocks, JetEngine

Check out the live site

My Blue 4 You

The My Blue 4 You website offers yacht chartering services and plunges you into the vacay-and-relax atmosphere at first glance. Right at the entrance, you will see a JetSearch-added quick search, where you can enter the desired destination and find the tour. If you scroll down the page, you will see a listing grid housing the most popular destinations.

Developer, Theme & Template: Andrea Sorrentino
Plugins: JetElements, JetSmartFilters, JetTabs, JetBlocks, JetSearch, JetEngine, JetReviews

Check out the live site

Pointe de Sel

When a website covers traveling around one country/region, it often allows you to book a few travel options. And then, it is very convenient to use a dropdown list where all the choices will be. It is precisely what is done on the Pointe de Sel website, offering travel destinations in the Alps.

The main page has a dropdown from JetSmartFilters, and users can easily select the appropriate option.

Developer, Theme & Template: Julien Deret
Plugins: JetElements, JetSmartFilters, JetBlog, JetTricks, JetEngine, JetBooking

Check out the live site

Viaja y Estudia

The following site is a travel booking and education site. Thematic trips and various offers are placed using the JetEngine listing grid. Users can click on the picture to get more information about each offer.

Developer, Theme & Template: Renzo Salvador
Plugins: JetElements, JetEngine

Check out the live site

Top 5 Educational Elementor Websites

Libro Game Live

The Libro Game Live project is dedicated to exploring and preserving nature. People are supposed to take proposed routes and gain new knowledge about wildlife and environmental protection. The website uses many different JetPlugins, but I want to show you what JetElements buttons can look like. 

Developer, Theme & Template: Cristina Villani
Plugins: JetElements, JetSmartFilters, JetTricks, JetEngine

Check out the live site

Oprah Winfrey Leadership Academy for Girls

Next on the list is the Academy website owned by the world-famous host Oprah Winfrey. It looks down-to-earth, inspiring, and stylish. The developers used the parallax effect to ensure smooth browsing. At the top, there is a handy menu by JetMenu. It allows you to fit a lot of information into a smaller section and help users quickly find the needed page.

Developer, Theme & Template: Lethabo Mashike
Plugins: JetElements, JetSmartFilters, JetTabs, JetSearch, JetEngine

Check out the live site

Commons and Communities

A JetEngine listing grid can be implemented for different website types, including educational projects. It allows you to output the necessary information compactly. A great example can be seen on the following Elementor website. It has collected and presented events and exhibitions worth visiting to enjoy contemporary art.

Developer, Theme & Template: Paulo Fehlauer
Plugins: JetSmartFilters, JetEngine

Check out the live site

KBTours

Educational tours are popular all over the globe. And if you need to display several similar destinations, you could use JetTabs to fit all the information into convenient tabs. Inside them, you can find multiple listing items with dynamically changing data. 

Developer, Theme & Template: Revved Digital
Plugins: JetElements, JetBlog, JetMenu, JetTabs, JetSearch, JetEngine, JetFormBuilder

Check out the live site

Academia Chilena

Some features of educational sites may not be entirely prominent. For example, if you have many scientific materials, users need to find what they need quickly, so it is convenient to use the filtering system. A good use case is on the Academia Chilena website. In the library section, site visitors can find the needed book using the JetSmartFilters-built sorting tool.

Developer, Theme & Template: Gonzalo Suez
Plugins: JetSmartFilters, JetEngine

Check out the live site

FAQ

Last Words

Well, now you see that Elementor allows you to create any website. And it doesn’t matter what task you want to use it for. Extending Elementor functionality with JetPlugins gives you limitless opportunities.

As you can see, the most popular elements created with JetPlugins are:

• parallax;
• listing grid;
• navigation links;
• filters.

But Crocoblock plugins are so functional that you can create virtually anything and bring your most daring ideas to life.

I showed you only 40 sites, and I hope they will help you find inspiration for your future projects. Save the article so you don’t lose it when you need new ideas.

The post 40 Best Elementor Websites Examples Created With JetPlugins appeared first on Crocoblock.

Table of Contents

• Understand the Tourism Sector Characteristics
• Plan a Travel Website
• Work on the Travel Website Content
• Booking Tours Through Your Website
• Create the Website Using WordPress
• Take Care of Your Website’s Look and Feel
• Guide the User Through Your Website
• Content Is Still King
• FAQ
• To Sum Up

Understand the Tourism Sector Characteristics 

The tourism sector has a lot of opportunities nowadays. Despite the big portals and tour aggregators, there is plenty of room for small businesses and professionals who want to build travel websites and make their way in this sector.

Travelers want more and more personalized and different experiences. Mass tourism is giving way to another way of enjoying our holidays.

Tourism companies specializing in nature trips, sports, cultural routes, retreats, and many other activities can take advantage of this trend.

To do so, having a website capable of capturing users’ interest is essential for success.

Plan a Travel Website

From my point of view, content creation and SEO is an excellent opportunity to generate visitors and customers. If you specialize in a specific destination or type of tourism, it will be much easier to make your way in search engines.

Many tourists are unaware of everything possible to do at the destination, so you must be the one to guide and inspire them. To achieve this, plan how you will invite users to browse and find different ideas for their trip when building a travel website.

A good strategy is to create a web architecture that contains the different destinations, activities, accommodations, and tours you offer. 

If you work on the content and tourism web design properly, your website will rank well in search engines and capture the traveler’s interest.

A blog will help send traffic to different categories of your web architecture and demonstrate your expertise in the niche.

Work on the Travel Website Content

As customers, we always want the greatest certainty about the product we buy.

This is also true for the travel niche, so we must make every effort to gather all the necessary information.

The user expects to find information quickly, for example:

• what to bring on the trip;
• activity duration;
• time of the year when one can book a tour;
• distance, if it is a route;
• whether it’s possible to bring children or pets.

Organize this information in a way that makes it easy to consume. A list of details with icons or a section for frequently asked questions is advisable.

It is essential to create website tour copy from scratch and make it engaging, readable, and plagiarism-free. 

Booking Tours Through Your Website

This is a complex point because it is not always possible to automate the booking process. Sometimes it is necessary to manually check the availability of accommodation, activities, and guides.

In that case, a contact form is sufficient if it includes the departure date, number of people, and contact details.

Fortunately, there are many ready-made booking solutions available today. They are popular because:

• everything inside is already pre-configured for you;
• you can customize whatever you like – from texts to design elements, etc.;
• it is basically a workable website, and the hardest part – dynamic content and bookings – is already set up;
• they save you time.

Crocoblock offers several Dynamic Templates in the travel booking niche. For instance, Travengo is a tour agency website template allowing users to book tours to different European and American destinations. 

Learn more about Travengo components and check out the video above; it helped me a lot. 

Travengo has everything up and running:

• custom post types and custom fields;
• tour single pages and archives;
• booking engine and forms;
• AJAX-based filtering tool, and more.

The best part is you won’t have to mull over how to create tourism websites. You could take a template and see how it works, then build a travel website similar to it.

Create the Website Using WordPress

Creating the individual tour and accommodation pages using JetEngine and Elementor (or Gutenberg editor) is easy, even if you’re not a WordPress expert. 

The goal is to create custom fields to allow you to add and modify tours quickly and easily. 

For example, you can create a custom field for each main tour data.

With JetEngine’s listing grids, you can create the layout of each tour card and display them in attractive grids. A photo and a short description can be enough to catch the user’s attention.

JetEngine allows you to create custom taxonomies, so use your imagination to create as many tour listings as options you offer to your customers:

• one-day activities;
• family-friendly tours;
• summer tours;
• guided tours.

Do you have a lot of tours or accommodations? You can allow your users to filter the tours using the JetSmartFilters plugin. 

Do you want the traveler to book tours on your website? You can use the JetBooking plugin and integrate it with WooCommerce payment gateways.

Take Care of Your Website’s Look and Feel

If you visit big travel websites like Booking.com, Airbnb, and the like, you will see that they follow similar design patterns. Simplicity and order are essential to avoid overwhelming information.

Try to follow these patterns but add a personal touch that fits your brand image.

Guide the User Through Your Website

Think about how travelers plan their trips. They could start by looking for accommodation, and then you can offer activities. Or perhaps the process is the other way around, and they are interested in a particular activity while the accommodation is less important.

In either case, prepare your website to guide the traveler through the process without making it complicated. Choose the text of your calls to action well so they always know what to do next.

Content Is Still King

How to make a travel website content-rich, you may wonder? It’s easy – good photography, video, and copywriting will be essential for your website and promoting your service on social media and video platforms. 

All the time and budget you invest in these areas will pay off in future sales for your business.

FAQ

To Sum Up

I hope these tips will help you figure out how to create a tourism website and make it look professional. These tips, which I have learned from making travel websites over the last few years, can improve your website’s conversion.

The post 8 Tips to Build Travel Website From Manuel Lago Garcia appeared first on Crocoblock.