BG - Website Developer & SEO Expert

If you have a hero section that is playing a video background, and you are facing issues about it where it shows empty background when video is not loaded yet, this is the CSS solution that will help you solve the problem.

background-image: url('imageurl.jpg');

background-size: cover;

background-position: center;

position: absolute;

inset: 0;

z-index: 1;

transition: opacity 0.5s ease;

Just copy the code above, and while the section is active go to advanced and paste it inside Custom CSS. make sure you replace the imageurl.jpg to your actual image background fallback.

That's it.

How to Align the Checkbox and the Label using simple CSS

In most cases, the label and checkbox align to each other, but what if you have a long text and viewing it on the wide screen makes the checkbox and label stack to each other, now this simple solution using CSS will help you solve the problem.

Since the id of the input is dynamic we will be using a selector to select input and the label.

CSS Code:

input[type="checkbox"] + label {
display: inline;
}

The Event Calendar has its own shortcode feature but only for PRO users, which of course if you are a serious users of your own business where you have your own website that uses this plugin then I suggest you use purchase this plugin it has a great features to offer for pro users.

You can view a demo to their official website, that we you have a quick glance how this plugin works, now if you have a client that has a concern of budget, will this PHP code will help you do the thing like make a customize simple layout design where you have a chance to customize the event page but of course this PHP short code will only show the current event of the month with search functionality that targets to actual events in The Event Calendar plugin.

As you can see on the screenshot above there is a date above that shows the current date, that is not included in the code, I use an Elementor to display that but I will also include the php code that will display a date incase you want it as well. the main functionality of their is the Search Function, and the listing the current event of the month.

View Code On My Git Hub

The code has two files, one is PHP and the second one is CSS (EventCalendarShortCodeSnippets.css / EventCalendarShortCodeSnippets.php) these two files is necessary for starting point, if you know about css you can ignore the css files and add your own css base on that php code, just copy the PHP code and paste it using Code Snippets or into functions.php, will create a video tutorial below how to implement it for the sake of beginners.

If you have any issues running it please let me know, also ensure that THE EVENT CALENDAR is already activated and that you have an event of the current month so you know its working.

Bricks builder is one of the trend page builder for WordPress, this article is simple we will put any useful tools here that can be use for actual products of building page such as responsiveness and more.

Bricks Grid Template:

This function below is useful especially if your using bricks and you want to set the minmax base on the page width say 1100px and also you can customize it to your liking.

repeat(auto-fit, minmax(400px, 1fr)) - it set to function auto-fit for responsiveness and then set 400 for 2 columns with 1 fraction, this 400px is base on page-width size.

repeat(2, minmax(200px, 1fr)) - This is also simple and straight forward, the grid template here os suggested base on bricks documentation.

My Mockup Design List Using Figma

Figma is a design tool that helps teams create and work together on mockups in real-time. It's cloud-based, so team members can collaborate from anywhere. Figma has many design features like wireframes, prototypes, and design libraries. It's easy to use and helps teams work more efficiently to produce high-quality designs.

Below is the following page design I made for my client and would add more here in the future.

Note: This design is made with inspiration, you can get my ideas here if you want.

There are lots of plugins out there that you can start working out in terms of making your own way to improve the SEO or Search Engine Optimization of your website or even for your client, so one of the Top 3 plugins that are popular today is:

Yoast SEO
All-In-One SEO
Rank Math

Other WP Plugins :

Meta Tag Manager
Schema
Add Meta Tag Keywords

Chrome Extension or Website Tools

Keywords Everywhere
SEMRush
Google Keyword Planner
Google Trend
SEO Quake

This is a quick background overlay code for Pro Version:

/*Tablet background Overlay Elementor Pro*/
@media(max-width:1024px){
    selector.elementor-element > .elementor-background-overlay {
    background-color: transparent;
    background-image: linear-gradient(
80deg, #000000 20%, #F2295B00 80%);
    opacity: 0.79;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
}
/*Mobile background Overlay Elementor Pro*/
@media(max-width:767px){
    selector.elementor-element > .elementor-background-overlay {
    background-color: transparent;
    background-image: linear-gradient(
180deg, #000000 20%, #F2295B00 80%);
    opacity: 0.79;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
}

This is a code for quick styling of the mobile in the Elementor Free version:

/*Tablet background Overlay Elementor Free*/
@media(max-width:1024px){
    .bg-overlay.elementor-element.bg-overlay > .elementor-background-overlay {
    background-color: transparent;
    background-image: linear-gradient(
90deg, #000000 30%, #F2295B00 80%);
    opacity: 0.79;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
}

/*Mobile background Overlay Elementor Free */
@media(max-width:767px){
    .bg-overlay.elementor-element.bg-overlay > .elementor-background-overlay {
    background-color: transparent;
    background-image: linear-gradient(
180deg, #000000 30%, #F2295B00 80%);
    opacity: 0.79;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
}

You can watch the tutorial base on this video here

This kind of strategy is easy to implement just go to your Elementor editor where you edit the page then drag the Divider element, do some settings changes, then add this line of code below into the Custom CSS.

Also, you need to change the width from Percentage into Pixels:

selector{
    transform: rotate(90deg)
}

Note that you can also use this for any element simple but do the job done. Cheers!

This is just a simple Pricing plan that I created using Elementor PRO, you can get inspiration from this design, it's a highlighted layout in the Pro Plan and the rest is just a normal box.

It's a Price Table Element from Elementor Pro, and from there you can tweak the layout, depending on your preference, when you also hover over each pricing table there is a default shadow which you can also adjust.

I will update this page once I made another layout using Elementor Pro.

Thanks!

<style>
/* CONTAINER BOXED LAYOUT*/
/* Ultra wide */
@media (max-width: 3840px) {
.c-box {--content-width: 55%;}}
/* Desktop */
@media (max-width: 1920px) {
.c-box {--content-width: 65%;}}
/* Laptop big */
@media (max-width: 1600px) {
.c-box {--content-width: 74%;}}
/* Laptop small */
@media (max-width: 1366px) {
.c-box {--content-width: 77%;}}
/* Tablet portrait */
@media (max-width: 1200px) {
.c-box {--content-width: 80%;}}
/* Mobile */
@media (max-width: 767px) {
.c-box {--content-width: 85%;}}
</style>

Using This you can do a global change in any screen size for better optimization of website responsiveness, I just wrote it here for my reference, this is based on Rino's tips, and many thanks to him as I've been using this for quite some time on my project.

This one below is also working for my 27inches screen monitor.

@media screen and (min-width: 1280px) {
    /*Your CSS Code here*/
    .our-services-class {
        margin-top:250px;
    }
}

Just paste this code before closing the tag of HEAD HTML, or if you're using Elementor PRO, just it in the global page custom CSS

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles */
    }
    
    /* Smartphones (landscape) ----------- */
    @media only screen and (min-width : 321px) {
    /* Styles */
    }
    
    /* Smartphones (portrait) ----------- */
    @media only screen and (max-width : 320px) {
    /* Styles */
    }
    
    /* iPads (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    /* Styles */
    }
    
    /* iPads (landscape) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
    and (orientation : landscape) {
    /* Styles */
    }
    
    /* iPads (portrait) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
    and (orientation : portrait) {
    /* Styles */
    }
    /**********
    iPad 3
    **********/
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
    and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
    }
    
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
    and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
    }
    /* Desktops and laptops ----------- */
    @media only screen  and (min-width : 1224px) {
    /* Styles */
    }
    
    /* Large screens ----------- */
    @media only screen  and (min-width : 1824px) {
    /* Styles */
    }
    
    /* iPhone 4 ----------- */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px)
    and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
    }
    
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px)
    and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
    }
    
    /* iPhone 5 ----------- */
    @media only screen and (min-device-width: 320px) and (max-device-height: 568px)
    and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
    }
    
    @media only screen and (min-device-width: 320px) and (max-device-height: 568px)
    and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
    }
    
    /* iPhone 6 ----------- */
    @media only screen and (min-device-width: 375px) and (max-device-height: 667px)
    and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
    }
    
    @media only screen and (min-device-width: 375px) and (max-device-height: 667px)
    and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
    }
    
    /* iPhone 6+ ----------- */
    @media only screen and (min-device-width: 414px) and (max-device-height: 736px)
    and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
    }
    
    @media only screen and (min-device-width: 414px) and (max-device-height: 736px)
    and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
    }
    
    /* Samsung Galaxy S3 ----------- */
    @media only screen and (min-device-width: 320px) and (max-device-height: 640px)
    and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
    }
    
    @media only screen and (min-device-width: 320px) and (max-device-height: 640px)
    and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
    /* Styles */
    }
    
    /* Samsung Galaxy S4 ----------- */
    @media only screen and (min-device-width: 320px) and (max-device-height: 640px)
    and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
    }
    
    @media only screen and (min-device-width: 320px) and (max-device-height: 640px)
    and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
    }
    
    /* Samsung Galaxy S5 ----------- */
    @media only screen and (min-device-width: 360px) and (max-device-height: 640px)
    and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
    }
    
    @media only screen and (min-device-width: 360px) and (max-device-height: 640px)
    and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
    /* Styles */
    }

This is a quick list of some most themes that I work on each of my project, though some of my clients have their own themes installed on their themes, but when I will be the one to build the site from scratch this is most of the themes that I use.

Hello Elementor
OceanWP
Astra
Sahifa (for Blogging)
DIVI Theme
Genesis
Jevelin
The 7
Avada
BeTheme

I tried other themes but I won't list it here as this is most of the themes I use in my recent projects.

Hi, I am

Bryan G. Granse

ABOUT ME

Bryan G. Granse

My Professional Skills

Services

Website Development

Animated elements

Responsive Design

Modern design

Flexible and with New PC and Fast Internet

Fast support

Portfolio / Blog

Bricks Grid Template:

My Mockup Design List Using Figma

Popular Posts

Labels

categories

Blog Archive

Contributors

GET A FREE QUOTE NOW

SAY HELLO TO ME

Search This Blog

Mga Pahina

ADDRESS

EMAIL