BG - Website Developer & SEO Expert

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.

/*bryanDevs add custom css for Overlay*/

.about-legacy .et_pb_section_0:before{

    content:"";

    display:block;

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background: #434141 !important;

    opacity:60%;

    z-index:1;

}

//Below are the thing you need to add directly into the element or section of DIVI

content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-image: linear-gradient(142deg,rgba(38,252,0.61)0%, #5e1196 100%) !important; z-index:1;

The code snippet above is a custom CSS in which you can add an overlay background which is not achievable in DIVI builder for now, but in Elementor its already available, I just added it here for reference and probably it is also helpful to WordPress Developer/Designer.

Above you need to go to Section Settings of DIVI and go to Custom CSS, just paste it right in Advance>CustomCSS (before) section.

Page Builder, I Am Using for WordPress Development:

Visual Composer
Divi Builder
Elementor
Thrive Architect
Avada Builder
Oxygen Builder

Visual Composer - This is one of the most common plugins I use to build Websites in WordPress CMS.

DIVI Builder - I once use this builder and it's really good as well, there are premium themes that use this builder called Divi Themes.

Elementor - This one is my favorite but since my recent client did not use this one as they prefer Visual composer I rarely use this, but what I like this one is that you can create your own custom elements with it, you can try it with a free version, and there is also an Elementor Pro version of it, I mostly do some small projects using this builder in my localhost server.

Other Plugin Extension I Use:

Overlaiz
Unlimited Elements for Elementor
Essential Addons
Happy Elementor Addons
OoohBoi Steroids for Elementor

Thrive Architect - I have a client who has all tools in Thrive and this builder is also good, but I think its too expensive, but to be honest its really good, you can create a decent page for the blog page before I develop a blog and Photography site using this builder.

Avada Builder - I also use this as it also has powerful tools, the only problem with this is that it is only intended for Avada Themes, not unlike Elementor which is compatible with most of the themes you can imagine.

#bryangransedevs #wordpressdeveloper #development #wordpress #photography #projects #pagebuilder #elementorpro #elementor

Display OS Memory Using NodeJS - Convert MB to GB

This simple code is to display a basic output from OS free memory using NodeJS, and then output it into the console.log() terminal, take note that I am using VS Code Here so if you wanted to try you can use that text editor or you can use your own.

Documentation of OS in Node can be found on their website which you can also go here. for the JS Source Code, you can get it here. (You will get the full functionality of it including the Functions that will convert the Megabytes into GigaBytes).

This Simple coding is just documentation for my NodeJS journey, and I also do JavaScript/ReactJs/Express Journey and also Laravel which will soon be displayed on this small basic blog site of mine.

Basic Code to Display OS.FreeMEM():

const os = require('node:os');
console.log(os);
const totalMemory = os.totalmem();
console.log(`TOTAL MEMORY: ${totalMemory} MB`);

JAVASCRIPT FETCHING JSON USING XMLHttpRequest()

Index.html I have this basic HTML that will use to display data from JSON file, here is the code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript Fetch JSON FILE</title>
    <link rel="shortcut icon" href="data:" type="image/x-icon">
</head>
<body>
    <div class="output"></div>
    <script src="./app.js"></script>
</body>
</html>

App.js is where the JavaScript magic happens to fetch the JSON file.

const url = './data.json'; const output = document.querySelector('.output'); 
 let xHR = new XMLHttpRequest(); 
 console.log(xHR) 
xHR.open('GET', url); 
xHR.responseType = 'json'; 
xHR.onload = function() {
    
console.log(xHR.response);
    
let data = xHR.response;
    
data.books.forEach(result => {
        
output.innerHTML += `§{result.title}<br />`;
    
})
} 
xHR.send();
console.log(xHR);

Below is the JSON file that I use, you can create your own and explore, this is just for testing that will let us display data using XML http request.

{
    "books": [
        {
            "title": "Learn to Code",
            "author": "Bryan Devs",
            "isbn": "324-23243"
        },
        {
            "title": "The Adventure JSON",
            "author": "Jason Jones",
            "isbn": "3324-2-444"
        },
        {
            "title": "New Objects",
            "author": "Jane Doe",
            "isbn": "2343-234-2433"
        }

    ]
}

If you want to get the source code file you can visit this site PH Directories & Resources and download the whole file cheers.

BG - Website Developer & SEO Expert

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

My SEO Tips and Journey

Portfolio / Blog

Portfolio: Mockup Design Using Figma

My Mockup Design List Using Figma

Free SEO Plugin I Use for WordPress On-Page SEO

Background Overlay Elementor Pro and Free Version Custom CSS

How to Make Horizontal Divider Line in Elementor Into Vertical Line Divider

Pricing Plan Design I created Using Elementor Pro

Container Percentage For Responsiveness of Box Global Change | Min to Max CSS Breakpoints I Use

WordPress Themes That I Use

Custom CSS Color OVerlay For DIVI or Elementor

WordPress Page Builder Tools That I Use During My WordPress Journey

A Simple and Basic Code to Get PC Memory Using NodeJS Then Convert from MB to FB

Coding: Testing To Fetch JSON Data Using XMLHttpRequest()

Popular Posts

Labels

categories

Blog Archive

Report Abuse

Contributors

GET A FREE QUOTE NOW

SAY HELLO TO ME

Search This Blog

Mga Pahina

ADDRESS

EMAIL