Bryan G. Granse

I am a Front End Developer

  • Free SEO Plugin I Use for WordPress On-Page SEO

    Free SEO Plugin I Use for WordPress On-Page SEO

     


    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:

    1. Yoast SEO
    2. All-In-One SEO
    3. Rank Math
    Other WP Plugins :
    1. Meta Tag Manager
    2. Schema
    3. Add Meta Tag Keywords
    Chrome Extension or Website Tools
    1. Keywords Everywhere
    2. SEMRush
    3. Google Keyword Planner
    4. Google Trend
    5. SEO Quake

  • Background Overlay Elementor Pro and Free Version Custom CSS

    Background Overlay Elementor Pro and Free Version Custom CSS

     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

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

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

     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!


  • Pricing Plan Design I created Using Elementor Pro

    Pricing Plan Design I created Using Elementor Pro

     


    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!


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

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

    <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 */
        }


  • WordPress Themes That I Use

    WordPress Themes That I Use

     


    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.

    1. Hello Elementor
    2. OceanWP
    3. Astra
    4. Sahifa (for Blogging)
    5. DIVI Theme
    6. Genesis
    7. Jevelin
    8. The 7
    9. Avada
    10. 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.

  • Custom CSS Color OVerlay For DIVI or Elementor

    Custom CSS Color OVerlay For DIVI or Elementor

    /*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.


    • Pages (4)1234 Next »

    GET A FREE QUOTE NOW

    I am flexible and would like to work with you long term, and currently I am looking for a fulltime job with a long term opportunity, but able to work also part-time, get free qoute for project.

    GET FREE QUOTE

    SAY HELLO TO ME

    Search This Blog
    Powered by Blogger.

    Mga Pahina

    ADDRESS

    Purok 5-A, Brgy. Magdum, Tagum City 8100, Davao del Norte, Philippines

    EMAIL

    gransebryan@gmail.com
    bryanworkdevs@gmail.com

    Copyright © 2014 - 2023 BG - Website Developer & SEO Expert. Designed By Portfolio Blogger Templates
    Made With