Many people underestimate the power of CSS. Some of the fancy features that we see on the websites use JavaScript codes, but they can be implemented with pure CSS these days. For example, parallax sections almost always use JavaScript libraries, but in this article, we’ll cover how to build a pure CSS parallax section in just a few minutes.
Using pure CSS parallax can be easier and more performant since we don’t need to use JavaScript libraries.
What we’ll build
In this article, we’re going to build the following parallax sections with pure CSS. You can see the live demo at CodePen.
Understanding the used properties for pure CSS parallax
This technique relies on the CSS3 transform and perspective properties. By using these properties, we can create 3D elements in the space and scale and move them as necessary.
Transform property
This property enables you to transform elements in a two-dimensional and three-dimensional space. By using this property, we can rotate, scale, move and skew the element in the space.
You can see different examples of transform properties in this pen.
Perspective property
This property is used to enable three-dimensional space for the element. The children of the element can be positioned in the space.
In this pen, you can test the perspective property live.
Implementing the technique
Now that we’ve learned a bit about transform and perspective properties, let’s get our hands dirty and write some actual codes. The codes will be divided into two sections: HTML and CSS codes.
Markup
We need some simple markups for the parallax section. The role of each markup is explained below.
.main is used for setting perspective and overflow properties.
.section is used for setting general styling, not necessarily related to parallax.
.static is used for setting the static section properties.
.static-(one|two|three) is used for setting different background colors for static sections.
.parallax is used for setting ::after (pseudo-element) which holds the transform properties.
.parallax-(one|two) is used for setting different background images.
Styling
This is where the magic happens. The necessary lines are commended to help you understand the codes.
.main {
/* Fill the available space */
height: 100vh;
/* Make the children of the element closer to the viewport */
perspective: 2px;
/* Hide the overflow */
overflow-x: hidden;
}
/* General styling, not necessarily related to parallax effect */
.section {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 80vh;
font-size: 40px;
text-transform: uppercase;
font-weight: bold;
}
/* Different background colors for demo purpose */
.static-one {
background-color: #feceab;
}
.static-two {
background-color: #aacfcf;
}
.static-three {
background-color: #c06c84;
}
.parallax::after {
/* Position the pseudo-element to fill the parent */
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* Scale the image to full */
background-size: cover;
/* Move the element back then scale the element, it helps to appears more slowly */
transform: translateZ(-1px) scale(1.7);
/* Set the parallax section before the other elements. */
z-index: -1;
}
/* Different background images */
.parallax-one::after {
background-image: url(https://source.unsplash.com/vs6a4EHj_Ro/1600x900);
}
.parallax-two::after {
background-image: url(https://source.unsplash.com/P86-JPbDnPY/1600x900);
}
Wrapping up
In this article, we covered one of the coolest CSS implementations. By learning these types of techniques, we’ll understand how CSS is powerful and what we may be able to create in pure CSS.
This implementation was one of the most straight-forward ones, you can see the following ones for more advanced usages.
Are you in the habit of updating your WordPress website (including its themes and plugins)? If not, your website could be open to security threats or could be repelling potential customers. As a member of the Artbees support team, I saw that the reason many customers didn’t update their themes/plugins is that everything was working well, and they didn’t want to risk losing functionality. But this is problematic: by using outdated files, your website becomes vulnerable and could be hacked. Or sometimes people thought they were keeping their entire site up to date by only updating WordPress while they were using old themes and plugins. This often causes incompatibilities, and it’s likely some functions won’t work on the site.
Why is updating WordPress so important?
WordPress websites use themes and plugins that are created by third-party organizations. This means that when a new WordPress version is released, they update their products to fix any incompatibilities too. So let’s say you update the theme/plugins but keep using the old WordPress version, you may experience some troubles on the site like layout problems or some functions not working properly.
Another reason to update WordPress is to get your hands on new features. Sometimes you won’t notice them right away as the features could be minor – or they could be major and be exactly what you wanted.
If a vulnerability in an old WordPress file is fixed in the new version, you’ll want to update it without hesitation on your part. Not getting rid of the vulnerability will make it easier for hackers to quickly and easily hack your site.
Hackers typically check the WordPress changelog, and they can see where the vulnerabilities were fixed, so they can easily get into the sites with the old WordPress version. So be sure you always use the updates.
It’s no secret that if you’re using an old version of WordPress, you might experience website issues like slow loading speed, navigation-related problems or redirected pages. Outdated plugins and themes can increase website response time, and your visitors may leave the site quickly.
When you face some problems on your website and want to contact online support for help, most answers will be related to new versions of WordPress and you’ll definitely be suggested to update yours.
In this article, you’ll be able to find detailed instructions on how to easily and quickly update a WordPress website.
Problems of using outdated WordPress plugins and themes
Once you’ve updated the WordPress version, you need to also update all of your website’s WordPress plugins and themes. Along with new features, the plugins/themes authors might also include security solutions. This means that installing the latest version of the WordPress plugins and themes makes it harder for hackers to break your website.
If you don’t update the plugins and themes, old versions might have a negative effect on your website speed and performance in several ways. They can increase your website response time, which will result in fewer visitors on your site.
Installing the latest plugins and themes is much better as they are more optimized for the latest WordPress technologies, and you’ll improve both performance and user experience.
Tips for safely updating your WordPress website
Before hitting the “Update Now” button, it’s important to follow the steps below to keep your site safe:
Make sure to backup all your WordPress files and database. You can do this via your hosting control panel or using some plugin, for example, BackWPup.
Use a staging environment before applying updates to your live site. After testing the update on the staging site, you can overwrite the live environment with the staging. It takes more time, but you’ll avoid any problems that may be caused on the live site. To create a staging environment refer to these two articles: Update your WordPress Website Using a Staging Site and How to Setup your WordPress Development Environment.
Check the plugins and themes changelog to avoid any risks that may occur.
First update WordPress installation and then update your plugins and theme. Many of the WordPress plugins can be automatically updated from the WordPress plugin repository. It doesn’t work like this, however, for premium plugins and themes. You may not receive a notification of the update. And by overwriting the files on FTP level or through a special control panel of the theme you can only update the plugin or theme.
Don’t forget to test the site after you made the updates. Make sure the frontend is functioning properly. The most important steps to test:
Check the homepage and a few other pages
Fill in a form and check if the message is delivered
Check if the multilingual function is working (if using WPML or Polylang)
Check elements such as sliders, pop-ups, call-to-action
Test the search function
What to do if the update goes wrong?
If for some reason your live website got broken after the update, you should hide it from the public to fix it before showing it again. This means that you should enable the maintenance mode for the website. For this, you can use a plugin such as the WP Maintenance Mode, or, if you’re using the Jupiter X theme, you can enable the maintenance mode in Customizer.
Make sure to clear the cache of your website to see all the features or changes that came with the current update.
Check the theme or plugin’s support forums. Perhaps the issue you have was already discussed, and you’ll be able to find a solution to your problem quickly.
Some themes/plugins may require to re-save the options to update the database. Try to re-save theme or plugins settings, and don’t forget to clear the cache.
Contact the support team. If you have a premium theme, then you’ll get a fast response. Just be specific in your description, provide screenshots of the errors, as well as the login details to the wp-admin panel and FTP, so the support agents can investigate the problem.
If you’re unable to find a solution, it’s better to restore a site from the backup. You can ask for help from your hosting provider support to get your site restored. Then contact a theme/plugin support, so they can investigate the issue with the update. It’s also better to provide your staging environment where the support team can test.
Wrapping up
It’s important to continue updating your WordPress site so that it’s safe, and hackers cannot get to it. You may think you don’t need an update as the site is now functioning properly. But please note that further down the line, ignoring updates will cause more problems.
Updating your site will provide several benefits: improved performance, new features, and a secure website! Stay updated – stay safe!
Sending out a notification on a website that users can interact with plays a significant role. When users do something on a website, a notification system can keep them motivated and encourage them to do more. And the great thing is that there are plenty of ways you can send notifications to your users: emails, SMS, direct messages, push notifications on browsers and also internal notifications on the website itself. In this post, we’ll provide an overview of how you can build a WordPress website notification system, which could then be used as a base structure for all kinds of notifications.
Scenario:
Let’s say we have a website where users can edit their own profiles and have different roles and by doing an action, the user should receive a notification. We might ask users on our website to take quizzes, and in this case, we would then need a way to notify them of whether or not they passed a quiz.
To begin setting up your WordPress website notification system, install WordPress and navigate to Dashboard -> Plugins -> Install Plugins.
Search for Ultimate Member and install the plugin.
Installing the Ultimate Member Plugin
After that, activate the plugin and create the default pages.
Activating the Ultimate Member plugin and setting up the default pages
We are done here. It’s time to configure the plugin and add the notification plugin.
Configuring the Member’s directory and user profiles
The Ultimate Member plugin extends the WordPress user management system and adds a lot of capabilities to it. The good thing about the Ultimate Member plugin is that it has a vast variety of add-ons, and you can even build and shape a real social network using this plugin. Each user can have a profile and you – as the admin – can choose to have different registration fields or user profile details on the website. It’s a very good choice to run a membership directory website. Ultimate Membership will add restricting access capability to your content and menus. You can define different user roles and show different content to them. The plugin settings are located in Ultimate Member -> Settings.
Configure the plugin with your optimal setting and also create your user roles and registration forms under Ultimate Member -> User Roles and Ultimate Member -> Forms and test the registration and check the user public profiles.
Default profile view of the Ultimate Member plugin using Jupiter X
I want the sidebar to be removed on the profile pages. I also want to hide the title bar on top of the profile pages. So, I’ll install the ACF plugin from Jupiter X -> Control Panel -> Plugins and edit the profile page like this:
Activating the Advanced Custom Fields plugin in Jupiter X.
Now I’m going to find the profile page in the list of my pages. It’s named as “User.”
User Profile Page
I’ll hide the sidebar and title bar by setting the layout options and disable the title and description on the page.
Disabling the sidebar and title bar on the profile pages
This can also be done by simply selecting the Full Width template from the page attributes. Using this method you can also remove the extra gap on top and bottom of the page.
A Full-Width profile page without any gaps on top and the bottom
The result would be like this:
Now you can add a cover photo, custom avatar and all the profile details you want. More information can be found here.
Installing and configuring the Real-time Notifications extension
The good thing about Ultimate Member is that it lets you use extensions, particularly those whufeful when setting up a WordPress website notification system. Most of its extensions are not free, but indeed worth buying. A list of available extensions is provided here. It also has a developer API available here.
We want to add the Internal Notifications feature, so I’m going to buy and download the Real-time Notifications extension. On the extension description they say:
Add a real-time notification system to your site so users can receive updates and notifications directly on your website as they happen. This helps to increase user engagement and keep users on your site.
Great! So, after purchasing the extension, we need to install it like every other plugin. Navigate through Plugins -> Add New and upload the package and install. Then activate it through the plugins page.
Activating the Ultimate Member – Real-time Notifications
Register the plugin with your purchase key and go to Ultimate Member -> Settings. Right after the activation, you can see that a new tab named as Extensions is added to the settings page of the plugin.
Ultimate Member Extensions settings
The first available settings on the extensions, prior to the installed ones, is notifications here. Configure the plugin as you wish. I would like to enable the instant notification to send the notifications even if the user has not refreshed the page.
Here you can find out about the features that this plugin offers. As the plugin doc says:
Enable real-time instant notification – It is recommended to turn this setting off if your server is getting some load.
Change the location of the notification icon to either bottom left or bottom right.
Modify the number of seconds on how often you want the ajax notifier to check for new notifications.
Always display the notification icon – If turned off, the icon will only show when there’s a new notification.
Account Tab – Show or hide an account tab that shows the web notifications.
You can turn on or off notifications and edit the templates for the following :
Role upgrade
New guest comment
User view profile
Guest view profile
User awarded points for action
User deducted points for action
User receives points from another person
User gets a new private message
User gets a new wall post
User gets a new wall comment
User gets a new post like
User gets a new mention
User account is verified
I’m going to create a temporary profile and test the functionality when I visit that profile. As soon as a guest or a member visits a profile – since we have enabled the “User View Profile” notification in the settings – he/she will get notified that someone visited their profile.
Notification received
By clicking on the notification button, the following notification will be shown:
Notifications listed and sorted by date in descending order
In the next step, we’re going to notify a user with a customized notification while triggering an action. For example, you may need to send a notification to a user when he/she downloads a file or when the user membership is about to expire.
Adding custom notifications using API
Let’s say that you have an online quiz website. The users register to your website, purchase a membership plan or a quiz and then want to take that quiz and get notified about the results. I skip the part that you take to provide the membership plan and monetize the quiz, but in brief, you can do it with a combination of the WooCommerce and Ultimate Membership plugin. You can add a new user role, then add a new WooCommerce product and use this extension to automatically assign that role to the user right after purchasing that product and then restrict your content for that user role.
Assuming that you are using the Quiz Master plugin, we want to send a notification to the user who finished the quiz and notify them as to whether or not they passed the quiz.
For the first step, I’m going to install the Quiz Master Plugin.
Installing the Quiz Master Plugin
After that, from the Quiz Maker menu, I’ll add a new quiz.
Add a new Quiz/Survey
Then I’ll provide the questions inside the quiz. You can find information about this process here.
I’ll add a page and a question and save the quiz.
Creating a page and question in a quiz
Then in the Options tab, I’ll make sure the quiz is only available for the logged-in users. If you want more restrictions, you need to redirect all the single quiz pages to the login or content restriction page using a redirection plugin. Then embed the quiz with a shortcode into a page and using Ultimate Member, restrict the quiz to the specific user roles. Also, make sure these two options are checked and activated in the Quiz Maker settings:
Disable Quiz Posts From Being Searched?
Disable Quiz Archive?
Configuring the quiz plugin settings
By clicking on the Embed link on the quizzes page, you can get a shortcode and put it on the page you want.
Getting the embed shortcode of the quiz
After copying the shortcode, create a page and add it to the content of that page. Then configure the page visibility for different user roles and, by doing that, you are restricting the quiz to specific roles.
Restricting the quiz to different roles
Now while visiting that page and have the correct user role, you can take part in that quiz.
The quiz page. Use the page settings to remove the sidebar and title bar if you wish to have a clean quiz page.
Here, I’d like to add a custom notification for the users to be notified about the results of their quiz. To do that, I need to activate my child theme and write some codes. As the first step, install and activate your child theme like what’s described here. Then, in the child theme’s functions.php file, I will add these codes:
/*
This code sample shows you how to use the API to create
and add custom notifications (for real-time notifications)
plugin.
STEP 1: You need to extend the filter: um_notifications_core_log_types with your
new notification type as follows. For example:
*/
add_filter('um_notifications_core_log_types', 'add_rad_shodan_notification_type', 200 );
function add_rad_shodan_notification_type( $array ) {
$array['failed_in_quiz'] = array(
'title' => 'Failed In the QUIZ', // title for reference in backend settings
'template' => 'You failed in the quiz!', // the template, {member} is a tag, this is how the notification will appear in your notifications
'account_desc' => 'When the user failed in the quiz', // title for account page (notification settings)
);
$array['pass_in_the_quiz'] = array(
'title' => 'Passed the QUIZ', // title for reference in backend settings
'template' => 'Congrats! You passed the quiz!', // the template, {member} is a tag, this is how the notification will appear in your notifications
'account_desc' => 'When the user passed the quiz', // title for account page (notification settings)
);
return $array;
}
/*
STEP 2: Add an icon and color to this new notification type.
*/
add_filter('um_notifications_get_icon', 'add_custom_notification_icon', 10, 2 );
function add_custom_notification_icon( $output, $type ) {
if ( $type == 'failed_in_quiz' ) { // note that our new action id is "new_action" from previous filter
$output = '<i class="um-icon-android-close" style="color: red"></i>';
}
if ( $type == 'pass_in_the_quiz' ) { // note that our new action id is "new_action" from previous filter
$output = '<i class="um-icon-android-done" style="color: green"></i>';
}
return $output;
}
//get the results of the quiz and in case the user was having the acceptable number, change his role to "passed_quiz_1"
//Add this custom action to php\classes\class-qmn-quiz-manager.php at one line before return the results in submit_results() function in order to be able to get the final results and parse the array based on category results
// do_action('qsm_quiz_submitted_custom', $results_array, $results_id, $qmn_quiz_options, $qmn_array_for_variables, $result_display);
add_action('qsm_quiz_submitted_custom', 'get_the_results', 10, 5);
function get_the_results ($results_array, $results_id, $qmn_quiz_options, $qmn_array_for_variables, $result_display) {
// Test if quiz name contains the word "Quiz 1"
if(strpos(strtoupper($qmn_quiz_options->quiz_name), "QUIZ 1") !== false){
$user_id = $qmn_array_for_variables["user_id"];
// Fetch the WP_User object of our user.
$u = new WP_User( $user_id );
$matches = array();
//use the placeholder we put in the results text to fetch the results of different categories
preg_match('/\[points\]?(?:(.+?)?\[\/points\])?/', $result_display, $matches, PREG_OFFSET_CAPTURE);
if(!empty($matches)) {
$score = $matches[0];
$category_results = explode(" " ,$score[0]);
$CATEGORY_1 = $category_results[1];
//$CATEGORY_2 = $category_results[2];
//$CATEGORY_3 = $category_results[3];
//$CATEGORY_4 = $category_results[4];
//$CATEGORY_5 = $category_results[5];
//$CATEGORY_6 = $category_results[6];
//$CATEGORY_7 = $category_results[7];
//If the score in between equal 5 to 7 give him the score 7.5 and store the result in a meta field for the user
if($CATEGORY_1 >= 5 and $CATEGORY_1 <=7){
update_user_meta( $user_id, 'CATEGORY_1', 7.5 );
$CATEGORY_1=7.5;
}
else {
update_user_meta( $user_id, 'CATEGORY_1', $CATEGORY_1 );
}
//Add as many customizations as you like in the results.
if ( $CATEGORY_1 > 7 ){
$u->add_role( 'passed_quiz_1' );
$u->remove_role( 'subscriber' );
UM()->roles()->set_role( $user_id, 'passed_quiz_1' );
$user_data = wp_update_user( array( 'ID' => $user_id, 'user_url' => '' ) );
//Link to congratulations page and the other restricted content for the new user role. This link is being used when the user clicks on the notification.
$vars['notification_uri'] = get_the_permalink(1);
//trigger the notification API and send it to the user
UM()->Notifications_API()->api()->store_notification( $user_id , 'pass_in_the_quiz', $vars );
}
else {
$u->add_role( 'failed_quiz_1' );
$u->remove_role( 'subscriber' );
UM()->roles()->set_role( $user_id, 'failed_quiz_1' );
$user_data = wp_update_user( array( 'ID' => $user_id, 'user_url' => '' ) );
//Link to failed page and the other restricted content for the new user role. This link is being used when the user clicks on the notification.
$vars['notification_uri'] = get_the_permalink(2);
//trigger the notification API and send it to the user
UM()->Notifications_API()->api()->store_notification( $user_id , 'failed_in_quiz', $vars );
}
}
}
return;
}
The above code will create two new notifications type:
failed_in_quiz
pass_in_the_quiz
It will trigger them in the ‘qsm_quiz_submitted_custom’ action as provided in the code.
You also need to modify the Quiz Master plugin a little bit and add a custom action to be able to fetch the results and do your calculations. Add this custom action to:
php\classes\class-qmn-quiz-manager.php at one line before return the results in submit_results() function in order to be able to get the final results and parse the array based on category results
You need to know that, after adding a custom notification type, you need to activate it through the plugin settings to make it work. So, just navigate to Ultimate Member Settings -> Extensions and activate the new notification types and save the changes.
Activating the new notification types
To make sure the code is fully functional, you need to pass the score to the results in a hidden div and fetch it the code using regex. Maybe in the next versions of Quiz Master plugin, they will do this favor and provide a way to fetch the category scores individually. But for now, this is the best way you can get the category scores one by one. So, I will add this code to the results of my quiz to make my code work:
Printing the score in a hidden div in a shortcode structure to be able to fetch it via actions
The results would be like this:
User takes the quiz. If the user gets a minimum score, he/she will be considered as passed and his/her role will change to passed_quiz_1.
If the user doesn’t get the minimum score (which is 7 here), he/she will be considered as having failed it, and his/her role will change to failed_quiz_1.
In any of the cases above, the user will receive a notification prior to his/her acceptance or failure. This will be done by calling the notification API type pass_in_the_quiz or failed_in_quiz.
Custom notification in action
Add the notification button in the header
By default, you can only choose to place the notification button in the bottom left or right corner of the website. However, using Jupiter X, you can put it anywhere you want! Using a custom header template, I will put the notification button on my header and will hide the bottom corner button via custom CSS. In order to add the button in a header, create a custom header template like this and just add this shortcode anywhere you’d like:
[ultimatemember_notifications_button]
Adding the notification button to the header in Jupiter X
Find more how to create a custom header in Jupiter X here.
Final Words
In this article, we learned how to create a WordPress website notification system for our website using the Ultimate Member plugin and its addons. It still has a way to go – however it’s still possible to set up your internal notification system.
You may need to send an SMS or Email to inform the users and notify them about the things that are waiting for them on your website. Or you may need to provide a way to push the notifications in your user’s browsers. While there are so many other functionalities to discuss, we learned the fundamentals of running a notification system and also integrated it with custom functionalities like a quiz. If you had any questions or issues regarding the above code, kindly let me know in the comments below.
Various types of events or occasions such as birthdays or weddings mark significant milestones throughout our lives. Or important meetings for start-ups that propel a business forward. And it can be quite annoying if anything goes wrong during one of these events – many of these mistakes can be avoided through proper planning and organization, which starts out on an events website. However, doing so requires solid planning skills and appropriate tools. There are tons of resources out there for planning any kind of event that it can be difficult to choose which to use to fit your needs. In this article, we’ll give you all the info you need to incorporate key elements to create an events website while working in Jupiter X so you don’t miss anything when planning your next event.
1. Menu and hero section
Making a good first impression is crucial when a visitor lands on your site, so having an appropriate top section is much more important than other aspects of a site. This should be at the top of your priority list when you sit down to create an events website. In other words, the menu and hero section can greatly impact what the visitor will do after going on your website. Depending on the type of event, the menu and the hero section might contain a slider or a single image of a previous or upcoming event, important links in the menu (including contact info such as an address or phone number and a booking button.
After we’ve introduced our site with a stunning hero section and formed a positive first impression, it’s now time to provide more details about the event. Typically after a hero section, we might want to give some teasers of the event such as a countdown, the address, a shortlist of attendees. The details you choose to reveal will be different depending on the type of event.
3. Event details (date, place and other event-specific details)
This is another significant aspect of your events site, since it’ll contain all the necessary details about the event. When you set out to create an events website, try to be as informative as possible while only including necessary info such as the date and length of the event, where it’ll take place (and how to get there), attendees, as well as booking and cancellation details.
As we previously mentioned, not all events were created equally. This difference requires various approaches when listing event details. For instance, the schedule for a wedding will vary drastically from a nightclub event or an Halloween event. Luckily, Jupiter X has you covered with its wide array of layout and style choices for different events.
This section can contain details about event booking, tickets details and seat placement at the event. Again, depending on the event, you may also need to release early bird tickets, which might contain different plans with different prices.
Another important element of creating an events website is listing the sponsors and supporters of the event. These are important people or organizations who are providing some sort of support – listing them can add weight to your event and attract more visitors.
In creating this section, you’ll need to include the logo of the sponsors, their names and links to their sites. And if possible, you can also include a few words about them.
You can see how even sponsors are showcased in the Conference and Running Race templates.
7. Contact details and directions
For this section or page, you’ll want to provide as much information as possible about how to contact the event organizers and how to get to the event venue itself. Basically, you should try your best to answer all questions your visitors might have and not leave anything to chance.
In this article, we discussed the most commonly used, must-have elements needed to create an events website. For this, Jupiter X is there by your side to help you in easily designing your site by offering sleek ready-made templates – and all you have to do is import them! Why spend your precious time on redundant tasks when basic templates are available at your fingertips? Simply make a couple of changes here and there, and you’re good to go.
URL redirection is a method to redirect visitors to a specific page or section of your website. It’s most commonly used when a website is rebranded or under maintenance – through a simple URL redirection, visitors are redirected to the new website or the “under maintenance” page. However, what a lot of people don’t realize is that URL redirection can do a lot more than that; it can also be a powerful marketing tool. In this article, I’m going to explain how to effectively use redirection to personalize your WordPress website.
What is a URL redirection?
A URL redirection sends users and search engines to a different URL from the one that they requested.
There are two different types of redirections, and each has different use cases:
HTTP level redirection
This is done by 301 (moved permanently) and 302/307 (moved temporarily) redirects.
301 Redirect Facilitates permanent redirects of a page or domain to the new URL.
302 Moved Temporarily Facilitates temporary redirection of a page or domain to the new URL.
HTTP-level redirection lets search engines know about the redirection. So, for example, if your website declares a 301 permanent redirect to Google, Google transfers your old page or domain ranking power to the new one. But if you use 302 temporary redirects, the old site’s ranking power won’t be transferred to the new page or domain as the redirection is temporary.
This type of redirection is useful for rebranded or migrated websites as well as to update obsolete pages within the websites but If you want to use HTTP-level redirection you have to be cautious with its SEO implications.
You can do HTTP redirects by directly editing the .htaccess file in your server or by using SEO tools such as YoastSEO and UltimateSEO.
Browser-level Redirection
There is also a second method in implementing conduct redirects right within the browser without changing anything at the HTTP level and letting search engines know about it. This is useful when you want to redirect your visitors to different pages based on specific conditions but you don’t want this to affect your website’s and individual pages ranking power. For example you want to redirect the traffic coming from a specific source to a special page optimized for that source but you don’t want this to affect the SEO ranking power of your main landing page.
Browser-level redirection can be done by coding or readymade tools. This type of redirection is most useful for personalization and marketing purposes. For example:
Redirecting users from a specific source such as Instagram to a special landing page
Showing different homepages to visitors based on their stage. For example guests, leads and customers seeing different versions.
Redirecting users from Brazil to a Brazilian version of your homepage with local content
Showing a totally different and optimized homepage to your mobile users
Showing a temporary and exclusive landing page to a loyal customer when they hit a certain number of purchases
In this article, we’re going to further cover this kind of browser-level redirects. We’ll use our newly introduced marketing automation and personalization tool for WordPress and WooCommerce websites called Growmatik as a case study to show how to create conditional redirections to personalize your website for different segments.
Growmatik creates automation in the form of a ‘IF this THEN that’ rule. You can define different conditions (such as specific source, location, device or date) to trigger a redirection, and the redirection will automatically get executed when the condition is triggered.
Redirect traffic from a specific domain
If your website has a noticeable amount of traffic from a specific website such as a social media website or a partner blog, you can consider showing them a special landing page on their first visit. The content of this page can be optimized based on the source they are coming from and boosted with exclusive items such as discounts.
Using Growmatik, we’ll define this rule: IF [Source is X] THEN [Show Page Y].
In the Growmatik automations page, click on the + icon in one of the columns. This defines the user type you want to target with this redirection. It can be guests, leads and customers. We’ll select customers for this example.
Select Source from the conditions list (next to If)
Select domain and enter the website you want to define as the source. Let’s say it’s instagram.com and click Save.
4. Select Show Page from the actions list (next to Then). You will have two options from: By internal, you can choose a page inside your website and By external, you can define an external website to refer the visitor to
5. Check the ‘Activate rule immediately after creation’ if not checked and click on the Create Rule button.
Using the above simple rule all of the customers who are referred by Instagram, will be redirected to Instagram landing. Please note that this applies only to your existing customers as we defined that user type when creating the rule.
Redirect your ads traffic based on URL parameters (UTMs)
You can redirect the traffic coming from specific ad campaigns that you publish via Adwords, banners or blogs you do outside your website to personalize your content accordingly. For example, a nice special landing page exclusively built for your Adwords ads, a page built for your promotional email campaign or a special landing page for an online event or visitors of your booth who get a QR code to visit your website and join a competition, get discounts and so on.
You will need to define URL parameters in the form of UTMs in links you put in your ad campaign to your website. UTM values help you identify the source of the traffic in a narrower level than domain. So for a promo email campaign, you can use the link: https://your-website.com?UTM_source=PromoEmailCampaign
We will create a redirection rule such as the previous one just this time source should be set UTM values: IF [UTM_source is X] THEN [Show Page Y]
Redirect your mobile visitors to an exclusive landing page
All of us know the importance of optimizing websites loading speed and responsiveness to improve the mobile experience, but this is actually being done by many already. So if you want to take it a step further to stand out in the competition you can create a totally different landing page for mobile users with optimized design and exclusive content.
IF [device is mobile] THEN [Show Page X]:
In the Growmatik automations page, click on the + icon in one of the columns to define the user type you want to target with this redirection. For this example, we’ll choose customers.
Select Device from the conditions list.
Select the device type you want to target with: mobile, tablet or desktop
4. Select Show Page from the actions list and define an internal or external URL to redirect the segment and click on the Create Rule button.
With the above automation, your new mobile visitors will be automatically redirected to the page you specified.
Redirect visitors from a specific country
Next up in your redirection list should be geographical redirection to personalize your WordPress website.
It’s good practice to show optimized or even different content on your website to people from different countries. More relevancy will increase engagement from your visitors in different stages across your website.
For geolocational personalization, you need to first find out the main countries that sent traffic to your website and create special landing pages preferably with translated and more localized content.
IF [Location is Italy] THEN [Show Page X]:
Let’s create a simple automation in Growmatik:
In the Growmatik automations page, click on the + icon in one of the columns to define the user type you want to target with this redirection. I’ll choose leads.
Select Location from the conditions list and choose the country you want to target with your redirection. You can select one or multiple countries to target.
3. Select Show Page from the actions list and define an internal or external URL to redirect the segment and click on the Create Rule button.
With the above redirection automation, your leads from Austria will see the German landing page when they enter your website.
Redirect only on a specific date
Running occasional promotional campaigns can be an effective way to engage your visitors. Think of a special landing page made for Black Friday or a special homepage during a period (like the COVID-19 pandemic maybe just you don’t know when this occasion is going to end!)
So the redirection rule you need to define is:
IF [date is X] THEN [Show Page Y]
In the Growmatik automations page, click on the + icon in one of the columns to define the user type you want to target with this redirection. I’ll choose guests.
Select Date from the conditions list.
Choose the date or date period you’d like redirection to happen.
4. Select Show Page from the actions list and define an internal or external URL to redirect the segment.
The above redirection automation will redirect all your guest visitors during 2020 November 27 to your Black Friday landing page.
Redirect when a specific page is visited
When your service is under maintenance or a product is out of stock, and you don’t want to show a null ‘check back soon’ or ‘under maintenance’ page to your visitors, you can redirect them to a temporary page with useful links and alternative products or service they might like to check and prevent a hard bounce.
So the redirection rule you need to define is: IF [page X visited] THEN [Show Page Y]
In the Growmatik automations page, click on the + icon in one of the columns to define the user type you want to target with this redirection. I’ll choose leads.
Select Page Visit from the conditions list.
Choose the page you want to trigger the redirection when visited.
4. Select Show Page from the actions list and define an internal or external URL to redirect the segment.
By using the above automation, all of your leads that visit the product X page will be redirected to your product roundup page.
Redirect when a user made a specific number of orders
If you have a retention strategy for your WooCommerce business, you should definitely consider gamification techniques in your business and website. This means you can define milestones for your customers to do specific actions on your website such as visiting a page or buying a particular amount of products. Imagine users will see a temporary ‘thank you page’ with a special design, cross-selling links and probably discount coupons everytime they hit an order count milestone.
The redirection rule you will require is: IF [X orders placed] THEN [Show Page Y]
In the Growmatik automations page, click on the + icon in one of the columns to define the user type you want to target with this redirection. We will target customers in this example.
Select User Behavior > Orders Placed from the conditions list.
Choose the number of orders that should trigger the redirection.
4. Select Show Page from the actions list and define an internal or external URL to redirect the segment.
The above redirection will show the ‘Milestone thank you page’ every time a customer hits a total count of 5 orders in your website.
Wrap up
If there’s one way that marketing in the 2020s will differ from the past decade, it’s deeper personalization and more automation. Using smart redirections can help you make more relevant experiences for your WordPress and WooCommerce website visitors. In this article, I tried to show how to use redirection to personalize your WordPress website without affecting the search engine ranking of pages on your website.
In a future article, I’ll share more tips on how to achieve a deeper level of personalization in WordPress and WooCommerce websites with Growmatik. If you have experiences with using redirection for marketing and personalization purposes, please do not hesitate to share in the comments below.
WordPress now powers more than a third of the world wide web (36,5% as of May 21, 2020). This includes blogging, businesses, online stores and service websites in a wide variety of niches and sectors. And there is a huge line-up of businesses that evolved around the dominant CMS that builds and maintains WordPress websites: WordPress themes, hostings, managed services and, of course, maintenance and outsourcing businesses that help in developing and maintaining WordPress websites on your behalf.
Due to its piecemeal structure, WordPress is not as easy of a website building solution as its competitors such as Wix, Squarespace, etc… In recent years, this has led more individuals and businesses to consider using third-party services to complete the technical side of WordPress for them. In this article, we’ll take a look at the ins and outs of outsourcing WordPress development. We’ll answer the most common questions about outsourcing work in WordPress, whether or not you should do it, as well as tips on how to go about it the right way.
Why choose outsourcing WordPress development?
There’s no doubt that WordPress is easy to use, but it’s not very easy to set up and maintain. Unlike a SaaS solution, you have to put together different sections of the CMS together like lego pieces in order to get it working. This, on one hand, makes WordPress formable and extendible, which gives it a huge advantage over its competitors. On the other hand, this also makes it difficult to create and maintain. There are many solutions and options for each of these lego pieces you must choose from: themes, page builders, plugins, hostings, caching service and more.
You should either develop knowledge, experience and skillset to work with each of these yourself or break the bank to recruit and hire an in-house developer(s) to do it. But there’s a third option: outsourcing WordPress development to a ghost middle-man who specializes in WordPress. And even in a specific theme or plugin such as Jupiter X or Elementor. But in what ways is this beneficial to you?
Leverage expertise without having it
A WordPress specialist has developed years of experience and skills about the ins and outs of WordPress that your in-house developer might not know right off the bat. Even if you want to tackle the learning curve, there is a period of trial and error that you can skip by simply jumping on the back of a veteran WordPress specialist.
While the process of creating and operating in WordPress themes and page builders is standard, clear and documented, there are dozens of ways to do one single thing. And the result can vary widely based on which way you chose to do it. Specialists have learnt the best way to do different things after years of working with that theme or plugin.
Eliminate legwork and focus on creativity
Digital media production has a serious drawback in general: legwork. And it’s even worse with creation within WordPress. Some WordPress tasks involve more legwork than creativity. You spend tons of time converting your PSD to WordPress, playing with Elementor to create a page template or moving your content from an existing source to your new website.
There can be times when you spend more time building a template in Elementor than it took you to design it in Photoshop or Sketch!
The most important benefit of outsourcing is that it can free up your time to focus on what matters and what can only be done by you. Being a leader, designer, thinker, strategist, an ideator are things that cannot be outsourced. So you might save some time and focus on your creativity rather than installing WordPress.
Increase productivity and velocity
Development and QA is where the bottleneck happens in most teams. Especially if it involves new and unexplored areas where some research and trial and errors are involved. And it’s at that point where you can get a hand from an expert to get you out of a jam, smoothen your workflow and increase productivity by focusing on the other parts of the workflow like strategizing, customer development and marketing.
Having a smooth development workflow will give you confidence to work on more projects simultaneously. This is particularly important for high-volume teams where velocity is limited to the number of the few developers working in-house and you cannot assign them multiple tasks from different projects freely. By outsourcing to the right team, you’re actually doubling or tripling your team size without actually increasing your workforce.
Cut costs and increase profit margins
High-volume WordPress businesses such as agencies might reduce production costs by outsourcing WordPress labour instead of spending money to recruit, hire and employ staff.
What are white-label services?
White-label services ensure that your brand – and only your brand – will appear on the final product, even if you had a freelancer or agency doing the work on your behalf. Make sure to hash out the terms for branding and disclosure in the contract.
This is good for your brand and will protect your clientele. However, this also increases your and your contractor’s responsibility to assure the quality of the work. If there are any problems, the responsibility will lie on your shoulders (not your contractors), and your brand may be at stake.
White-label + partnership: The ideal formula!
White-label services are suitable for high-volume WordPress businesses and the regular flow of projects you want to outsource to someone reliable. It would be ideal if you can form a long-term relationship with your contractor and strike an agreement that would work in the interests of all parties involved. For example, a special rate exclusive to you when you promise to outsource a specific number of projects every month.
A long-term relationship fosters trust and reliability and transforms your contractor into a partner. There are some white-label agencies where you can have your own permanent team of experts who work on your projects, you get to know each other over time and perfectly improve the productivity as a result of long-term collaboration.
Who should outsource? Freelancers, agencies or end-users?
The short answer is everyone! Freelancers, agencies and end-users alike would benefit from getting help from a WordPress expert. It might be an end user who just bought a WordPress theme and needs help customizing it, a freelancer who needs a hand doing a job for their client or an agency with a large clientele who needs another team to lift off part of the workload.
What can be outsourced?
Custom WordPress development
You might want to consider outsourcing if you need advanced WordPress development for particular requirements on your website or you need WordPress plugins developed from scratch for your project. You require a lot of knowledge and skills with WordPress to get something like this yourself or by your developer.
✅ I want a custom calculator plugin …
✅ I want a few custom post types for my hotel website …
✅ I want a custom booking plugin built for my WordPress website
✅ I want a custom header design to look and feel like on example.com
✅ I want my popup to be showing a dynamic carousel populated by a post type in the WordPress backend.
✅ I need my portfolio to have some custom fields with specific relations
✅ I need a custom language selector for my multilingual website
✅ I need to integrate an LMS with WooCommerce
✅ I need to customize my Membership plugin
✅ I need a custom shortcode to show a content under specific conditions to a group of my users
Theme customization
This is one of the most popular outsourced services on the WordPress market: You bought a WordPress theme, and you want to customize it by adding a custom functionality, capability or some custom codes to add a specific visual function that is not possible with built-in features.
✅ I want a custom menu look in my template
✅ I want plugin X installed and optimized in my theme
✅ I need my current mega menu to to have a different look in mobile and desktop
✅ I need to make the plugin X look like the other parts of my website in my theme
✅ I need to customize my blog page to look like this
Performance & security optimization
This is another area where having extensive knowledge and skills is crucial – without which, you may risk your website health, data and security. If you have an active WordPress website with high traffic or several pages, you might want to have it audited by an expert for possible security measures and performance improvements.
Performance and security improvement checklists usually include the installation of SSL, caching and CDN services, which may require server and development knowledge and hands-on experience with different protocols and tools. It’s better if this is done by an experienced engineer.
✅ I need a 90% Google Page Speed for my client WordPress website
✅ I need a security checkup for my WordPress website
✅ I need a checkup on the performance leaks of my WordPress website (unused plugins, image optimization, compression, etc.)
Converting to WordPress
This may be the most popular outsource WordPress task among different WordPress teams. Let’s say you like and select a WordPress theme but don’t know how to implement the designs you or your designer did. Or you’d just like to get it done by someone who is an expert on that theme and already knows the best practices rather than playing around with trial and errors.
For instance, a Jupiter X expert could help you achieve maximum design loyalty as well as the efficient usage of elements and plugins to convert your design from a variety of sources such as PS, Sketch or Adobe XD.
✅ I need to create these templates with Elementor.
✅ I’d like to build my landing page with Jupiter X WP.
✅ Can I convert my Sketch designs to WordPress?
Custom design
Well, this is not directly a WordPress development job but definitely a part of it. If you’re creating a website for a very picky client or with special brand characteristics, you might want to have your website designed by expert designers exclusively based on your very own needs and preferences.
✅ Design me the most beautiful WordPress website!
✅ I’m representing a client with very unique brand characteristics, and we need a WordPress website for them.
✅ I want to add a brand new template in harmony with the rest of my theme.
Maintenance, migration & content management
If you’re running an active website for yourself or for a client with regular content updates, you may want a helping hand in completing the usual maintenance such as WordPress updates, plugin updates, theme updates and regular health checkups, as well as content additions such as the creation of weekly or monthly posts.
You may also need help migrating your content from an existing website with many posts, pages or products to a new WordPress theme (for example migrating from Jupiter to Jupiter X.)
You could handle this yourself if you have the skillset and enough knowledge about the original and destination platform. But if not or if you’re sensitive about your content and want a seamless migration, an expert will be helpful. They can assure a migration with maximum loyalty and with the best migration practices or content recreation in the destination platform for parts of your content that are not natively compatible and supported by the destination platform.
✅ I want a seamless migration from Jupiter to Jupiter X.
✅ I need a hand migration from Divi to Elementor.
✅ I want a regular maintenance checkup for my WordPress website.
What should not be outsourced?
It’s good to think of outsourcing as a solution to get something that you don’t know much about done by an expert. Or if you have the knowledge base but you simply don’t have enough time to complete the project. If it’s the former, it’s still important to have basic knowledge about the essence of what you want done. This may include basic knowledge of WordPress and how it works. Some coding knowledge of the language you want can also be helpful if your project is purely related to development.
If you’re running a dev team and considering outsourcing part of the development to another team, then you probably have a deep knowledge of your WordPress plugin or app and you should note your contractor may take time to achieve the same amount of knowledge and familiarity with your product.
There might be a learning curve, trial and errors and even possible defects before your contractor learns as much as you know about your plugin.
❌ I want to build the next Facebook with WordPress. Is that possible!?
❌ I want to build an open-source CMS to rival WordPress.
❌ I want a plugin developed to do all my accounting, site maintenance, online payments and security checkup for my WordPress website.
How to choose a WordPress outsourcing service
1- Begin small
If you’re new to outsourcing, it’s better if you start with small projects. You may face problems with outsourcing you didn’t expect and you were informed during your contractors sales pitch. It may take time for both of you to know each other’s needs and capabilities.
If you’re considering a long-term relationship, starting small will help you minimize possible damages and errors and learn the best practices along the way. This is particularly true about the development projects where tight collaboration and in-depth knowledge of both parties is crucial for a successful collaboration.
2- Provide clear descriptions
Make sure to specify all the details and material your contractor requires to start your WordPress project. This changes depending on the project type but below might come in handy for common project types:
WP conversion > Well-organized design files with proper layer folder and naming conventions
Theme customization > Detailed list of requested functionalities – if a visual feature, possibly with an explanatory video.
Custom Design > Possible samples of design that you admire and reflect the design characteristics you want in your design. Also detailed brand guidelines.
Content management > Well-organized content that you want posted on your website such a text, images, video with details about publishing date, category and tags.
3- Consider the best price, not the cheapest
When it comes time to outsourcing, the cheapest price is not always the best deal. It’s the value/price ratio! Like we discussed earlier, there may be a dozen ways to do a specific thing in WordPress. If a candidate contractor offers a price slightly higher than others, try to ask them and figure what specific feature or capability makes them eligible for that.
If your project is just another ordinary WordPress conversion project, then anyone who knows Elementor and Photoshop can convert it. In other words, there is not high loyalty and quality standards for you or your client. This means that you’re better off considering a lower price. However if you have a special and loyal client who trusts you because you respect their values and brands, then you should make sure your outsourcing contractor shares those values as well so the final product you deliver to your client is coherent, consistent and seamless.
In which case you should not consider the low prices and be open to pay more for a team who aspires to high-quality standards and cares as much for your client as you do.
4- Work with good communicators
When outsourcing WordPress development, communication is maybe the most important factor to take into consideration after the value for price. The best teams to collaborate with are not those who have the best engineers or best-in-class designers, they are the best communicators. The most important factor that leads to a positive and progressive collaboration is communication, and without proper communication, your collaboration will be painful and will fail to produce satisfactory results.
Make sure you know how you’ll communicate with your contractor team. Is it through a WhatsApp channel? Or an advanced briefing section built into their website? If you’re considering a long-term relationship with the contractor team, it’s good if you can establish a direct communication line and account manager who can directly interact with you.
Ideal white-label outsourcing teams offer different communication options such as phone calls, Zoom calls and briefing sections for their high-end and loyal clients.
5- Don’t proceed without a plan and written agreement
A risk factor of many outsourcing companies is that they are a group of coders and designers sitting in some unknown country behind computers and getting something done for you. You’re sharing critical information about your project, your business and your clients, so you should research the credibility of the team you are considering before starting working with them.
Check to see if they have written and coherent terms of service. If they do, then study it carefully so you’re informed about possible incidents along the way.
Do you see your rights reflected in the agreement you sign? Do they have a refund or dispute policy? Do they accept your NDA terms? And so on.
Furthermore it’s best practice to use the briefing section you are granted to write down and document everything so it can be used in case it’s required in the future to refer to a specific part of the conversation or project. Conversations made over the phone or on a Zoom call might not be referred to in the future if necessary.
6- Find reliable partners – not doers
An ideal team to get help from should be like any other team member, not an outside contractor just working behind the scenes delivering projects. If you want the best outcome from an outsourcing collaboration, you should foster a solid relationship that rewards both you and your contractor team and makes them as integrated into your team as your employed engineer or product manager. That is, of course, a mutual responsibility for both parties to achieve this level of trust and integration through offering each other the maximum value and mutual benefits.
What is WPDone?
Earlier this year, we rebranded our former custom modification subservice called Artbees Care into a brand new white-label WordPress Service called WPDone. WPDone is powered and operated by Artbees, the maker of the Jupiter X WordPress theme, and applies a decade-long experience with WordPress in delivering its clients’ projects.
In WPDone, our goal is to become another member of your team – not just a contractor – and to build good products without our name on it. We helped achieve the highest quality standards, development technologies and aesthetics values for more than 11 global WordPress agencies from different continents within the scope of more than 600 WordPress projects.
If you’re a high-volume WordPress freelancer or agency and are considering outsourcing WordPress development as part of a long-term collaboration with a white-label savvy WordPress team, then you can check out the WPDone Partners program for surprisingly good rates considering the high quality service you get.
When it comes to the features of the Gutenberg – the new WordPress block editor – the sky’s the limit. The Gutenberg development team is continuing to enhance the editor after each release to bring users more features. One of those features is Gutenberg block patterns, which is a game changer. Before you know it, we’ll be able to create a full site right inside the editor.
In this article, we’ll cover the Gutenberg block patterns feature and walk you through how we can quickly create our very own custom ones.
Note: To use the block patterns feature, you’ll need to install the latest Gutenberg plugin on your site.
Why block patterns?
If you’re familiar with Elementor, they have a Template feature that allows theme and plugin authors to create reusable combinations of elements/blocks and distribute them for users. This is not only the case for Elementor but nearly every popular page builder has a similar feature.
This feature was missing in the WordPress new editor and it was proposed in Github. This feature got enough attention and the initial version was released in Gutenberg v7.7 and was stable enough when v8.0 was released.
Creating custom Gutenberg block patterns
This feature starts to shine more when we can create our own block patterns and release them for others to use. Let’s start to create our first pattern.
It’s worth mentioning that we omitted some technical and other explanations, so you can more easily follow this post’s flow in making your first pattern.
1. Install the Code Snippets plugin
Install and activate the Code Snippets plugin. We’ll use this plugin to add the pattern registration codes in the following sections. You may also use a child theme or plugin to add the codes.
2. Create a pattern in the editor
Creating a pattern is a fairly easy job. We only need to create a new page and add some blocks in the editor. We used Image, Columns and Paragraph blocks to create the previously shown pattern.
3. Export the pattern codes
For registering a pattern, we need to export the created pattern as explained below.
To display our pattern in the list of patterns, we need to register it via the register_pattern PHP function. This function, as described in the WordPress handbook, receives the name of the pattern as the first argument and an array describing properties of the pattern as the second argument.
Add a new snippet from Snippets > Add New then fill in the settings as shown below. Make sure to click on the Save Changes and Activate button.
Finally, you should be able to see the pattern at the end of the Patterns section.
Conclusion
By now, it’s probably dawned on you the significance of Gutenberg block patterns and how to create a custom pattern in WordPress. We recommend that you keep up-to-date with the Gutenberg Github project to stay informed about developments regarding the feature.
We’d love to hear about your experiences with the Gutenberg block patterns feature, so please share your patterns with us in the comment section below.
More and more people prefer to search for different kinds of services online – and medical services are no exception. In fact, patients continually seek health information and search for new doctors online. Having a medical website can make a patient portal easily accessible and help educate patients about common health issues. Your website needs to attract and inform both new and current patients. In this post, you’ll find out exactly how to do this by including the essential elements to create a medical website.
Gain the trust of your patients
To boost your potential patients’ confidence in your care, we recommend that you use the Testimonials widget. You can add this on your homepage for quick and easy access or on a separate page if you have many testimonials to share.
It’s also a good idea to add a video where your patients can tell their story, which will increase trust in your work. In other words, don’t shy away from getting feedback that you can ultimately use to shine a positive light on your expertise and practice.
Display your contact information
A good medical website needs to have contact information that can be accessed easily. When you sit down to create a medical website, keep in mind that a user’s eyes will be naturally drawn to the top bar of the header, making it an ideal place to display contact info. It’s worth mentioning that you’ll want to include the number of your medical institution as well as numbers of different specialities. It’s not uncommon these days that people in an emergency situation will come across your information online, so it’s best to include this type of info so they can receive help as quickly as possible. Furthermore, providing an interactive map on the “Contact Us” page will allow visitors to easily locate your hospital or medical center.
Along with the map, you should add a contact form by using the Form element so potential patients can send their questions to you.
Another form that can be added is a booking or an appointment form. You’ll make the right call giving patients the chance to request an appointment online with a simple form. Check out an example of the booking form in the Vet template. A great feature will be to show an appointment form in the popup window via a call-to-action button, which you can place in the header. This allows visitors to book an appointment quickly without searching for a form through the site. Another way for booking appointments for a medical website is possible by integrating a WordPress appointment booking plugin.
Such an example can be viewed in the Lab template. To open a popup on a button click, you’ll need the JetPopUp plugin, which is bundled in the Jupiter X theme. This video tutorial will help you to implement that feature.
List the services you provide
You have two options in listing the services you provide when you create a medical website: you can either list them on your homepage or you can create a separate page. No matter which you decide, make sure to show it in your navigation menu in the header so the visitors don’t have to search. This info should be easy to find.
You can separate services in tabs by using the Tabs element found in the JetElements plugin. It’ll be easy to read them just by surfing between the tabs as shown in the Psychologist template:
Create a blog page to share news
When it comes to medical websites, a blog can be a very effective tool. It’s a great way to both educate and engage with patients. Educating your patients not only increases awareness of your practice but it also enables you to have in-person conversations with better-informed individuals. As you populate your blog with more content, it’s essential to make that content searchable. You can make content easier to find by categorizing it by topic, featured or most recent.
Make your blog posts easily shareable via social networks by including social media share buttons.
Introduce your staff
When a patient looks for medical help, he or she may worry about what kind of practice you have. In this case, you’ll want to do everything possible to give your visitors confidence in your care. To do this, you’ll need to list your credentials so that people trust that you can make them healthy again. You can also ease their concerns by introducing your medical team so visitors know the types of specialists on staff and their respective experience.. The Team Member element will help you to create this section, as can be seen in the Juno template.
Show results of your work
It’s often a good idea to provide further confidence in your practice by showing the results of your work through photos. You can show images with the Photo Album element or create a separate Portfolio page and include your portfolio projects as shown in the Almus template.
Let’s say that you have an aesthetic surgery practice. In this case, it would be ideal to show before and after photos for a simple comparison. Image Comparison is the best element to use. A good example of this can be found in Hair Implant template.
Report your statistics
Another way to give confidence in your work is to show the statistics of what you have achieved. Share how long you’ve been practicing and how many patients you have made healthy and happy. To display this information, you can use the Counter element and you’ll get animated numerical data, which will be more appealing to visitors than just simple static text or a table.
Provide answers to possible questions
If you create a FAQ page where you answer some popular questions, then this will prevent your potential patients from contacting you via the form and your mailbox won’t be flooded with the emails. It will be easier to read if you list the questions and the answers will be collapsed, so a visitor can click on a question and an answer will drop down. This is possible with the Toggle element which you can find in the Elementor editor. A good example of this is in the Treatment template.
List which insurance you accept
This info will be useful for potential patients, so they don’t pay any extra fees but pay less out of their own pockets. To list the insurance companies, you can show their logos and Brands element will be helpful here. This element is part of the JetElements plugin, which is bundled with the Jupiter X theme. Check an example of the Insurance logos with Brands element in this template.
Make sure the site is mobile friendly
If the website isn’t responsive on a tablet or phone screen, users will scroll by and continue their search. This is a big problem on your part as a lot of Internet users have mobile devices and they use them actively. Even if you have a nice site, you can lose your potential patients if it’s impossible to see it on a small screen of a mobile device.
You should consider this aspect at this stage of site creation.
Wrapping up
Your website can be a great tool to inform and educate visitors on your website. If you want to find an easy way to create a medical website and launch it with all of these key features, Artbees templates will help you in this situation. There are a lot of templates you can choose from and you’ll get a readymade website so you won’t have to pay a web designer.
With the rising popularity of Gutenberg, building tailored Gutenberg blocks is becoming an essential skill for every developer. Throughout time, the WordPress community has made some great contributions to Gutenberg. Today, let’s take a look at the Block Lab plugin. Creating a custom Gutenberg block with the Block Lab plugin is much easier than standard custom block creation via the native Gutenberg API.
In this article, let’s see how we can create a custom Gutenberg block with the Block Lab plugin. But before going forward, you might want to check out the following articles we posted about Gutenberg if you haven’t done so already.
First thing’s first. Let’s get familiar with the Block Lab plugin and then we can start creating an example block with this plugin to explore its features.
Highly flexible in creating different types of blocks from easy to complex ones.
Developer-friendly functions.
Good documentation and tutorials.
Creating a custom Gutenberg block with the Block Lab plugin
To demonstrate how this plugin works, let’s create a posts loop block in a few steps. Almost all websites need to use these types of blocks to show posts, portfolios, news and other types of content. Now imagine that you can create any type of posts loop block by yourself using this plugin.
For this article, we are going to create the following posts loop block called Modern Posts. It allows you to fetch posts from different post types and to specify the number of the posts.
1. Install a child theme
We need to use a child theme for our PHP and JavaScript codes. For the purposes of this article, we’re going to use the Jupiter X Child theme.
2. Plugin installation
Go to Plugins > Add New, search for the block lab, then install and activate the plugin.
3. Configuring the block
To configure the essential settings for the Modern Posts block, go to Block Lab > Add New then fill in the Title and Icon settings as shown below. You may change other settings based on your needs.
4. Add the block fields
Fields allow us to set different settings for each block. Almost all blocks benefit from the flexibility the fields offer. We suggest that you read the Fields documentation.
To create the Modern Posts block’s fields based on the initial design (as shown above), we need the following Post Type and Number of Posts fields. You may add more controls based on your needs. Let’s create them.
1. Click on the Add Field button to add the fields. 2. Add the Post Type field as shown below.
3. Add the Number of Posts field as shown below.
4. Click on the Publish button. Afterward, you’ll see the following message which tells you where to create your PHP file in the child theme.
5. Write the block code
Now it’s time to create the PHP and CSS files to make the block show the posts loop. 1. Create the block-modern-posts.php file in blocks folder in the child theme as shown below.
block_value() function gets the value from the fields that we created in the previous section.
We used a custom WP_Query to create a custom loop.
3. After adding the files, you can now play with the block in the WordPress editor.
Wrapping up
As outlined in this post, we walked you through how you can build a custom Gutenberg block with Block Lab, which is much easier than creating the blocks with the native Gutenberg API. In other words, the Block Lab plugin is a huge timesaver when it comes to creating custom blocks.
We’d love to hear about your experiences with the Block Lab plugin, so please share your custom blocks with us in the comment section below.
Every day, we’re seeing more and more plugins extending Gutenberg in different directions. This is great news for Gutenberg lovers since they can enjoy using it even more. One of those handy plugins that we’re going to cover today is called Lazy Blocks. In this article, we’ll look at how we can create a custom Gutenberg block with Lazy Blocks. It’s worth mentioning that we also published similar articles.
The mentality behind this plugin is to spend your time and energy on the result, not on learning how to create blocks. This mentality will allow you to unleash your potential in creating custom Gutenberg blocks.
In this article, we omitted some technical and extra explanations, so you can more easily follow this post’s flow in making your first block. To learn even more about the process, you might want to read the plugin documentation.
So let’s dive into it and create an attention-grabbing Gutenberg Blockquote block in a few simple steps.
1. Plugin installation
Go to Plugins > Add New, search for lazy blocks. Then install and activate the plugin.
1. Configuring the block
To configure the essential settings for the Blockquote block, go to Lazy Blocks > Add New then fill the Title and Icon settings as shown below. You may change other settings based on your needs.
2. Add the block controls
Controls allow us to specify dynamic settings for a block, and it’s almost necessary for all the blocks to have controls. They offer flexibility for the blocks. We suggest that you read the Controls documentation.
To create the Blockquote block’s controls based on the initial design (as shown above), we need the following Icon Background, Avatar, Text and Author controls. You may add more controls based on your needs. Let’s create them.
1. Under the Controls section, go to the Content tab and click on the + icon to add the controls.
2. Add the controls one by one as shown below.
3. At the end, your controls should look like below.
3. Write the block code
Now we need to write the actual codes based on the design to make the Blockquote block work. In this section, we also use the created controls in the block to make it dynamic based on the settings.
1. Under the Controls section, go to the Frontend tab and add the following codes. The controls names have been wrapped in curly brackets {{control-name}} then added inside the following code. We recommend that you read the Codes documentation.
2. Update the block and go to a page to see how the block works. You may add different texts, names, avatars and icon backgrounds to the block. All this can also be added in different layouts like columns.
Conclusion
In this blog post, we easily created a custom Gutenberg block with Lazy Blocks without the hassle of creating a separate plugin, child theme or other development obstacle. This Lazy Blocks plugin will definitely help actualize your ideas about custom Gutenberg blocks in no time.
We’d love to hear from you, so please share your custom blocks with us in the comment section below.
