CSS Flexbox refers to the “Flexible Box Module.” It is designed to align your HTML items & layouts in a more powerful way than CSS float. Flexbox is a one-dimensional layout model (either row or column when it comes to flex-direction). This post will give you a clear concept and practical examples of the Flexbox. If you take the time to understand this post (line by line) and watch the video, you will be able to use CSS Flexbox properly in your real web development projects. And this will give you a rock-solid understanding that will help you to solve […]
Read More →
To make the Divi accordion all closed, add the following JavaScript to your theme. Navigate to “Divi – Theme Options – Integration” and paste the following code in “Add code to the < head > of your blog.” After you save the changes and refresh the page, you will see that the accordions are closed. If you like video instructions and code explanations, please see the video at the bottom of this post. See also: How to close Elementor accordion by default? How to close a specific accordion in Divi? The above code will close all the accordions on your […]
Read More →You can use the built-in “Bulk Delete” feature but what if thousands of spammers are registered on your site? This will take you whole the day to delete only a couple of thousands of spammers. Moreover, you can’t remove more than 20 to 50 users at once because this might generate another error. As a developer, I came across this type of situation several times and hardly tried to delete spam users using the bulk delete option. However, I discovered that it’s not possible to manually delete thousands of spam users and this is not an efficient use of our […]
Read More →If you want to create a video preloader on your website, this post will walk you through the complete process. I also showed you four different examples of how to create the preloader on a static HTML website, Divi, and Elementor pro website and how to exit the preloader dynamically with the DOM (content) fully loaded. I used the same technics with a slightly different approach depending on the CMS (WordPress), page builders, etc. What is actually a preloader? A preloader is a loading screen that is visible until the webpage is fully loaded. It disappears after the DOM (content) […]
Read More →
In this post, I will show how you can change the logo on hover on Divi and Elementor websites. To change the logo on hover, we need a couple of lines of JavaScript. Don’t worry if you’re not familiar with it. Because I will show you everything step by step & will give you the code that you can copy-paste on your website. All you need is to replace a CSS ID. Let’s get started. How to change the logo on hover? In this video, I experimented with a Divi website but you can follow the same strategy for Elementor […]
Read More →By default, social media links in the Divi theme open in the same window. If you built a website with a Divi theme and added social icons/links to it, you’ll notice that they are not opening in a new tab. That means if someone clicks any of the social links, the visitor is leaving your website. But if you want your visitors to open the social media links without leaving your website, you have to add a target=”_blank” to all the social media links. And you have to do it using JavaScript. How to open social media links in a […]
Read More →In this post, I will show you how to trigger an Elementor popup after clicking any PDF link, and only show the corresponding file after the user submits a form. Also, you’ll get notified by email which will show you which specific file the user has downloaded. Do you want to send these email notifications using a custom email? See how to change the default sender email in WordPress? Anyways, please see the demo of the finished product at the beginning of the video. How to trigger the popup, collect information & display the file? Javascript (jQuery) code that I […]
Read More →If you’re trying to create a responsive navigation menu that works well on all screen sizes, this post will walk you in the right direction. Aside from the responsive header, you’ll also learn how to create a simple hamburger menu for smaller screen sizes. End of this post, the source code is available for download. Before you start building the navigation menu, see the demo in the link below. How to create responsive header navigation & hamburger menu? In this example, I will use HTML, CSS & a few lines of JavaScript. As you saw on the live demo, the […]
Read More →
Eco Web Hosting is a UK-based hosting company that offers managed WordPress, shared, virtual private server & reseller hosting. So if most of your target audience lives in the United Kingdom then this hosting company. Also, they accept payments directly in Pound Sterling that another benefit for the persons who live in the United Kingdom. In this post, I will show you how to add a domain to your existing hosting account, install WordPress, install free SSL certificates and migrate a WordPress website to in this hosting. Also, I will show you everything in a step-by-step video. How to add […]
Read More →
Bluehost has 22 add-ons to their marketplace and “SiteLock Security” is one of them. It’s a third-party tool that searches for threats and fixes websites if there are any security issues. Bluehost is partnered with SiteLock and they offer this security service to their clients. After the “Codeguard Basic,” this SiteLock Security is one of the most discussed add-ons among all other package extras. You will find this “SiteLock Security” add-on on the Bluehost dashboard. If you’re an existing Bluehost customer, you will find it in their marketplace. After you log in to your Bluehost account, navigate to “Marketplace → […]
Read More →