Bryan G. Granse

I am a Front End Developer

ABOUT ME

Bryan G. Granse

I am Working as WordPress Designer and Developer, I graduated last 2014, taking a cours of Bachelor of Science in Information Technology, since then I started working as freelancers full time for my previous client, and what I am doing is to design a new website from Digital site, Agency Site, Ecommerce or Shopping site using Woocommerce, Magento, Shopify and Opencart, I am expert in terms of Managing Cpanel, On page SEO, Keyword Research, Banner Design Using Adobe Photoshop, installing WordPress CMS from scratch, connect Cpanel hosting fo a new domain, able to work full time and flexible for Emergency task or urgent task.

Me

My Professional Skills

I am a full-stack developer specializing in WordPress (Bricks, Oxygen, Elementor Pro) and custom AI-integrated websites built with React JS and Laravel. I combine technical expertise in PHP, HTML, CSS, and JS with Bootstrap responsiveness and Adobe Photoshop design to create high-performance E-commerce platforms and landing pages. My approach integrates Technical SEO, speed optimization, and CPanel management with data-driven Facebook and Google Ads strategies using Clickfunnels, Leadpages, or OptimizePress to deliver scalable, high-conversion digital solutions.

Web Design / JavaScript 90%
Web Development & Cpanel Management 85%
PHP, HTML & CSS and Mobile Responsive 95%
Wordpress / Custom WP eCommerce 98%

Services

Website Development

I can work with less management as long as task for website is cleared, I have strong capabilities on my own suggestions about your website plan.

Animated elements

If you love to have a website sliders or Photo effects or one page design, I can do it for you I have best Themes for your website plan.

Responsive Design

Responsiveness is always one of the important thing when you have a website, and I can optimize mobile responsiveness according to your request, I use mobile media query CSS.

Modern design

I can make a good look and professional website or even you give me a website refference of what kind of website you want to be done.

Flexible and with New PC and Fast Internet

Previously I encountered problems of my internet due to basic plan so I was upgrading my plan and avail 10mpbs internet connection, which you can surely I am available during working hours or even urgent time.

Fast support

I always depend on my client (especially with the changes of particular task) and I am able to work with pressure, if the task needs to be done in a time frame I will do more effort and make the job done before the given time frame.

0
completed project
0
Clients
0
facebook like
0
current projects

Portfolio / Blog

  • 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.


    • 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[at]gmail.com
    bryanworkdevs[at]gmail.com

    Copyright © 2026 BG - Website Developer & SEO Expert. Powered By Bryan G. Granse
    Hire Me