{"id":4841,"date":"2026-05-12T15:34:00","date_gmt":"2026-05-12T10:04:00","guid":{"rendered":"https:\/\/phpyouth.com\/blog\/?p=4841"},"modified":"2026-05-18T15:03:03","modified_gmt":"2026-05-18T09:33:03","slug":"add-overlay-on-slider-revolution","status":"publish","type":"post","link":"https:\/\/phpyouth.com\/blog\/add-overlay-on-slider-revolution\/","title":{"rendered":"6 Easy Steps to Add a Color Overlay on Slider Revolution"},"content":{"rendered":"<p>If you&#8217;ve ever struggled to make your slider text readable over a bright or busy background image, a semi-transparent color overlay is the fix. It sits between your background and your text layers, tinting the image just enough to boost contrast without hiding it completely.<\/p>\n<p>In this guide, you&#8217;ll learn exactly how to add a color overlay on Slider Revolution 6+ using a Shape Layer, the correct method for the current interface. Slider Revolution does offer a built-in dotted overlay for video slides, but for a solid or custom-colored overlay, the Shape Layer approach is what you need.<\/p>\n<p>This tutorial reflects the Slider Revolution 6+ Module Editor interface. If you&#8217;re on an older version, some panel names may differ.<\/p>\n<h2>Why Add an Overlay on Your Slider?<\/h2>\n<p>Before jumping into the steps, here&#8217;s why this matters:<\/p>\n<ul>\n<li><strong>Text readability:<\/strong> Light or colorful backgrounds make white\/dark text hard to read. An overlay adds contrast instantly.<\/li>\n<li><strong>Brand consistency:<\/strong> Use your brand&#8217;s primary color as a tint to make every slide feel on-brand.<\/li>\n<li><strong>Professional look:<\/strong> Overlays give sliders a polished, editorial feel that plain background images lack.<\/li>\n<\/ul>\n<h2>What You&#8217;ll Need<\/h2>\n<ul>\n<li>WordPress with <a href=\"https:\/\/www.sliderrevolution.com\/\" target=\"_blank\" rel=\"noopener\">Slider Revolution<\/a> installed and activated (v6+)<\/li>\n<li>An existing slider with at least one slide<\/li>\n<li>A background image is already set on your slide<\/li>\n<\/ul>\n<h2>Step-by-Step: How to Add a Color Overlay on Slider Revolution 6+<\/h2>\n<h3>Step 1: Open the Module Editor<\/h3>\n<p>Go to WordPress Admin \u2192 Slider Revolution and click on the slider you want to edit. This opens the Module Editor, the main drag-and-drop interface where all slide editing happens.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2024\/05\/slider-revolution-step-1.webp?ssl=1\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" class=\"wp-full alignnone wp-image-12635\" src=\"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2024\/05\/slider-revolution-step-1.webp?resize=1920%2C1080&#038;ssl=1\" alt=\"Setting up a color overlay in Slider Revolution\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2024\/05\/slider-revolution-step-1.webp?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2024\/05\/slider-revolution-step-1.webp?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2024\/05\/slider-revolution-step-1.webp?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2024\/05\/slider-revolution-step-1.webp?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2024\/05\/slider-revolution-step-1.webp?resize=1536%2C864&amp;ssl=1 1536w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<h3>Step 2: Select Your Slide<\/h3>\n<p>In the slide panel (bottom of the editor), click on the specific slide where you want to add the overlay. Make sure the slide is active before moving to the next step.<br \/>\n<a href=\"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2024\/05\/slider-revolution-step-2.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"alignnone wp-full wp-image-12635\" src=\"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2024\/05\/slider-revolution-step-2.webp?ssl=1\" alt=\"module editor\" \/><\/a><\/p>\n<h3>Step 3: Add a Shape Layer<\/h3>\n<p>In the top toolbar, click &#8220;Add Layer&#8221; and select &#8220;Shape&#8221; from the dropdown options.<br \/>\nA blank rectangular shape will appear on your canvas. Don&#8217;t worry about its size, yet we&#8217;ll fix that in the next step.<br \/>\n<a href=\"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2024\/05\/slider-revolution-step-3.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"alignnone wp-full wp-image-12635\" src=\"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2024\/05\/slider-revolution-step-3.webp?ssl=1\" alt=\"module editor\" \/><\/a><\/p>\n<h3>Step 4: Make the Shape Cover the Full Slide<\/h3>\n<p>With the Shape Layer selected, go to the Size &amp; Position panel on the right side.<br \/>\nSet:<\/p>\n<ul>\n<li><strong>Size Preset:<\/strong> Cover<\/li>\n<li><strong>Layer Align:<\/strong> Scene<\/li>\n<\/ul>\n<p>This makes the overlay stretch across the entire slide on all screen sizes automatically.<br \/>\nIf your version doesn&#8217;t show a &#8220;Cover&#8221; preset, set these values manually:<\/p>\n<table>\n<thead>\n<tr>\n<th><b>Property<\/b><\/th>\n<th><b>Value<\/b><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><span style=\"font-weight: 400;\">Width<\/span><\/td>\n<td><span style=\"font-weight: 400;\">100%<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Height<\/span><\/td>\n<td><span style=\"font-weight: 400;\">100%<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">X Position<\/span><\/td>\n<td><span style=\"font-weight: 400;\">0<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Y Position<\/span><\/td>\n<td><span style=\"font-weight: 400;\">0<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Horizontal Align<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Left<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Vertical Align<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Top<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a href=\"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2024\/05\/slider-revolution-step-4.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"alignnone wp-full wp-image-12635\" src=\"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2024\/05\/slider-revolution-step-4.webp?ssl=1\" alt=\"module editor\" \/><\/a><\/p>\n<h3>Step 5: Set the Overlay Color and Opacity in the Slider Revolution<\/h3>\n<p>With the Shape Layer still selected, click the &#8220;Style&#8221; tab in the right panel. Under the Background section:<\/p>\n<ul>\n<li>Click the color swatch to open the color picker<\/li>\n<li><strong>Enter your color:<\/strong> #000000 (black) is the most common choice for improving text readability, but you can use any color, including your brand color<\/li>\n<li><strong>Adjust the opacity:<\/strong> anywhere between 30% and 60% is the sweet spot for most designs<\/li>\n<\/ul>\n<p><strong>Opacity guide:<\/strong><\/p>\n<ul>\n<li><strong>20-30%:<\/strong> Subtle tint, background image still very visible<\/li>\n<li><strong>40-50%:<\/strong> Balanced, good text contrast without hiding the image<\/li>\n<li><strong>60-70%:<\/strong> Strong overlay, image becomes secondary<\/li>\n<\/ul>\n<p><a href=\"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2024\/05\/slider-revolution-step-5.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"alignnone wp-full wp-image-12635\" src=\"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2024\/05\/slider-revolution-step-5.webp?ssl=1\" alt=\"module editor\" \/><\/a><\/p>\n<h3>Step 6: Fix the Layer Order in the Timeline<\/h3>\n<p>This is the step most people miss, and it&#8217;s what causes the &#8220;text looks grey&#8221; problem.<\/p>\n<p>By default, new layers are added at the top of the Timeline, which means they sit in front of everything, including your text. You need to move the overlay behind your text layers but above the background.<\/p>\n<p>In the Timeline panel at the bottom of the editor:<\/p>\n<ol>\n<li>Find your Shape Layer (the overlay you just created)<\/li>\n<li>Drag it down so it sits just above the background\/image layer<\/li>\n<li>All text, button, and icon layers should be above the overlay in the timeline<\/li>\n<\/ol>\n<p>In Slider Revolution 6, layers higher in the timeline = closer to the front (higher z-index). Overlay should be near the bottom, just above the slide background.<br \/>\n<a href=\"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2024\/05\/slider-revolution-step-6.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"alignnone wp-full wp-image-12635\" src=\"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2024\/05\/slider-revolution-step-6.webp?ssl=1\" alt=\"module editor\" \/><\/a><\/p>\n<h3>Step 7: Preview and Save<\/h3>\n<p>Click the &#8220;Preview&#8221; button to check how the overlay looks. Tweak the color and opacity if needed. When you&#8217;re happy, click &#8220;Save&#8221; to apply the changes to your live slider.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2024\/05\/slider-revolution-step-7.webp?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"alignnone wp-full wp-image-12635\" src=\"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2024\/05\/slider-revolution-step-7.webp?ssl=1\" alt=\"module editor\" \/><\/a><\/p>\n<h2>Bonus: Creative Overlays with Blend Modes<\/h2>\n<p>Want more than a simple color tint? Slider Revolution 6 supports CSS Blend Modes on Shape Layers, similar to what you&#8217;d find in Photoshop or Figma.<br \/>\nTo use them:<\/p>\n<ul>\n<li>Select your Shape Layer<\/li>\n<li>Go to Layer Options \u2192 Adv. Style \u2192 Blend Mode<\/li>\n<li>Try different modes:<\/li>\n<\/ul>\n<table>\n<thead>\n<tr>\n<th><b>Blend Mode<\/b><\/th>\n<th><b>Effect<\/b><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><span style=\"font-weight: 400;\">Multiply<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Darkens great for adding depth<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Screen<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Lightens good for bright, airy feels<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Overlay<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Increases contrast and saturation<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Color Dodge<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Creates a dramatic, bright glow<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Learn more about how blend modes work on the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/mix-blend-mode\" target=\"_blank\" rel=\"noopener\">MDN Web Docs Blend Mode reference<\/a>. It&#8217;s\u00a0the clearest explanation available.<\/p>\n<h2>Quick Reference<\/h2>\n<table>\n<thead>\n<tr>\n<th><b>Step<\/b><\/th>\n<th><b>Action<\/b><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><span style=\"font-weight: 400;\">1<\/span><\/td>\n<td><span style=\"font-weight: 400;\">WordPress Admin \u2192 Slider Revolution \u2192 Open Module Editor<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">2<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Select your target slide<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">3<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Add Layer \u2192 Shape<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">4<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Size Preset: Cover \/ Layer Align: Scene<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">5<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Style tab \u2192 Set color + opacity (30\u201360%)<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">6<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Move overlay below text layers in Timeline<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">7<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Preview \u2192 Save<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Frequently Asked Questions<\/h2>\n<h3>Why does my text look grey instead of white after adding the overlay?<\/h3>\n<p>This is a layer order issue. Your overlay Shape Layer is sitting on top of your text layers in the Timeline, which causes the overlay color to blend with and mute your text color. Go to the Timeline panel, drag the Shape Layer down so it sits below all text and button layers, and your text will return to its correct color.<\/p>\n<h3>Can I add a gradient overlay instead of a solid color?<\/h3>\n<p>Yes. Add two Shape Layers with different colors and different opacity levels, or use the background gradient option within the Shape Layer&#8217;s Style settings if your version of Slider Revolution supports it. Stack them in the correct order in the Timeline just like a solid overlay.<\/p>\n<h3>Does the overlay work on all slide types: image, video, and custom?<\/h3>\n<p>Yes. The Shape Layer approach works on all slide types in Slider Revolution 6. Specifically for video slides, Slider Revolution has a built-in dotted pattern overlay. However, for a solid color overlay on video slides, you still use the same Shape Layer method described in this tutorial.<\/p>\n<h3>Will adding an overlay slow down my slider or website?<\/h3>\n<p>No. A Shape Layer is rendered purely with CSS; it adds no additional image files or scripts. It has zero impact on your slider&#8217;s loading speed. That said, always make sure your background images are <a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener\">compressed before uploading<\/a> to keep overall page speed healthy.<\/p>\n<h3>My overlay doesn&#8217;t stretch to full width on mobile. What should I do?<\/h3>\n<p>Make sure Layer Align is set to Scene (not Slide or a fixed pixel value). The Scene alignment tells Slider Revolution to scale the layer relative to the full module width, which covers all breakpoints, including mobile.<\/p>\n<h3>Can I apply the same overlay to multiple slides at once?<\/h3>\n<p>Not directly with a single layer, but you can right-click the Shape Layer in the Timeline and use the &#8220;Copy Layer to All Slides&#8221; option (available in Slider Revolution 6). This duplicates the overlay to every slide in the module instantly.<\/p>\n<h2>Final Thoughts<\/h2>\n<p>Adding a color overlay on Slider Revolution is one of the quickest ways to make your slider look more polished and your text more readable. The key things to remember:<\/p>\n<ul>\n<li>Always use a Shape Layer for custom solid color overlays<\/li>\n<li>Set Size Preset to Cover and Layer Align to Scene for full coverage<\/li>\n<li>Layer order in the Timeline is everything; overlays must sit above the background, below the text<\/li>\n<\/ul>\n<p>If this tutorial helped you, share it with someone else building their WordPress site. And if you&#8217;re running into a version-specific issue not covered here, drop a comment below, and I&#8217;ll help you out.<\/p>\n<div class=\"custom-schema\"><script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"How to Add a Color Overlay in Slider Revolution\",\n  \"description\": \"Step-by-step guide to adding a semi-transparent color overlay in Slider Revolution 6+ using a Shape Layer.\",\n  \"totalTime\": \"PT10M\",\n  \"tool\": [\n    {\n      \"@type\": \"HowToTool\",\n      \"name\": \"Slider Revolution Plugin (v6+)\"\n    },\n    {\n      \"@type\": \"HowToTool\",\n      \"name\": \"WordPress Admin Panel\"\n    }\n  ],\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Open the Module Editor\",\n      \"text\": \"Go to WordPress Admin -> Slider Revolution and open the slider.\"\n    }\n  ]\n}\n<\/script><script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [\n    {\n      \"@type\": \"Question\",\n      \"name\": \"Why does my text look grey instead of white after adding the overlay?\",\n      \"acceptedAnswer\": {\n        \"@type\": \"Answer\",\n        \"text\": \"This is a layer order issue. Move the shape layer below text layers.\"\n      }\n    }\n  ]\n}\n<\/script><\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;ve ever struggled to make your slider text readable over a bright or busy background image, a semi-transparent color overlay is the fix. It sits between your background and your text layers, tinting the image just enough to boost contrast without hiding it completely. In this guide, you&#8217;ll learn exactly how to add a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4865,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[93,8,161],"tags":[567,572,568,570,163,569,162,571],"class_list":["post-4841","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","category-plugins","category-slider-revolution","tag-add-overlay","tag-color-overlay","tag-semi-transparent-overlay","tag-shape-layer","tag-slider-revolution","tag-slider-revolution-6","tag-wordpress-slider","tag-wordpress-tutorial"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2018\/09\/overlay-in-SR.png?fit=560%2C315&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8zepR-1g5","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":6364,"url":"https:\/\/phpyouth.com\/blog\/top-5-wordpress-page-builders\/","url_meta":{"origin":4841,"position":0},"title":"Top 5 WordPress Page Builders to Elevate Your Website","author":"RK Jajoria","date":"November 27, 2022","format":false,"excerpt":"WordPress is the world\u2019s most popular content management system (CMS). It\u2019s free, easy to use, and perfect for small businesses starting their first website. Beginners often find it simple to learn web design basics and create great pages using the built-in WordPress page builder However, after learning the basics of\u2026","rel":"","context":"In &quot;Wordpress&quot;","block_context":{"text":"Wordpress","link":"https:\/\/phpyouth.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"WordPress Page Builders to Elevate Your Website","src":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/01\/WordPress-Page-Builders-to-Elevate-Your-Website.webp?fit=1100%2C650&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/01\/WordPress-Page-Builders-to-Elevate-Your-Website.webp?fit=1100%2C650&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/01\/WordPress-Page-Builders-to-Elevate-Your-Website.webp?fit=1100%2C650&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/01\/WordPress-Page-Builders-to-Elevate-Your-Website.webp?fit=1100%2C650&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/01\/WordPress-Page-Builders-to-Elevate-Your-Website.webp?fit=1100%2C650&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6459,"url":"https:\/\/phpyouth.com\/blog\/add-html-signature-in-gmail\/","url_meta":{"origin":4841,"position":1},"title":"How to Add HTML Signature in Gmail: Step-by-Step Tutorial","author":"RK Jajoria","date":"April 19, 2023","format":false,"excerpt":"Do you ever feel like your email signature lacks personality or doesn't reflect your brand? Have you designed your own signature in HTML format, but don't know how to add it to your Gmail signature? If so, you've come to the right place! Here is a simplified guide on how\u2026","rel":"","context":"In &quot;Tutorial&quot;","block_context":{"text":"Tutorial","link":"https:\/\/phpyouth.com\/blog\/category\/tutorial\/"},"img":{"alt_text":"Add HTML Signature in Gmail","src":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2023\/04\/Add-HTML-Signature-in-Gmail.jpg?fit=960%2C540&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2023\/04\/Add-HTML-Signature-in-Gmail.jpg?fit=960%2C540&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2023\/04\/Add-HTML-Signature-in-Gmail.jpg?fit=960%2C540&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2023\/04\/Add-HTML-Signature-in-Gmail.jpg?fit=960%2C540&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":6603,"url":"https:\/\/phpyouth.com\/blog\/elementor-flexbox-tutorial-beginner-to-pro\/","url_meta":{"origin":4841,"position":2},"title":"The Ultimate Elementor Flexbox Tutorial: Beginner to Pro","author":"RK Jajoria","date":"July 27, 2023","format":false,"excerpt":"Welcome to the Elementor Flexbox Tutorial! If you want a trendy, professional-looking website, the Elementor Flexbox tutorial is an excellent tool for your design. This is because it enables you to create dynamic layouts that adapt to various screen sizes and orientations. As a result, your website will be both\u2026","rel":"","context":"In &quot;Tutorial&quot;","block_context":{"text":"Tutorial","link":"https:\/\/phpyouth.com\/blog\/category\/tutorial\/"},"img":{"alt_text":"The Ultimate Elementor Flexbox Tutorial","src":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/01\/Ultimate-Elementor-Flexbox-Tutorial-Beginner-to-Pro.webp?fit=1200%2C686&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/01\/Ultimate-Elementor-Flexbox-Tutorial-Beginner-to-Pro.webp?fit=1200%2C686&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/01\/Ultimate-Elementor-Flexbox-Tutorial-Beginner-to-Pro.webp?fit=1200%2C686&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/01\/Ultimate-Elementor-Flexbox-Tutorial-Beginner-to-Pro.webp?fit=1200%2C686&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/01\/Ultimate-Elementor-Flexbox-Tutorial-Beginner-to-Pro.webp?fit=1200%2C686&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":331,"url":"https:\/\/phpyouth.com\/blog\/wordpress-tutorial-how-to-create-a-wordpress-themes\/","url_meta":{"origin":4841,"position":3},"title":"Create A WordPress Themes","author":"RK Jajoria","date":"May 19, 2014","format":false,"excerpt":"WordPress themes are the most used and popular blogging platform on the web. Its flexibility, usability, and customizability are why people regard WordPress highly. Another reason is WordPress's huge array of themes; you can create almost anything, from online magazines to advanced e-commerce businesses. WordPress themes. You can either get\u2026","rel":"","context":"In &quot;Wordpress&quot;","block_context":{"text":"Wordpress","link":"https:\/\/phpyouth.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2014\/05\/How-to-Create-a-Custom-WordPress-Theme-e1475050552348.png?fit=900%2C468&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2014\/05\/How-to-Create-a-Custom-WordPress-Theme-e1475050552348.png?fit=900%2C468&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2014\/05\/How-to-Create-a-Custom-WordPress-Theme-e1475050552348.png?fit=900%2C468&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2014\/05\/How-to-Create-a-Custom-WordPress-Theme-e1475050552348.png?fit=900%2C468&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":5122,"url":"https:\/\/phpyouth.com\/blog\/wordpress-kirk\/","url_meta":{"origin":4841,"position":4},"title":"Introducing WordPress Kirk","author":"RK Jajoria","date":"November 13, 2019","format":false,"excerpt":"Do you guys know what is Kirk? Why we are talking about Kirk? So let's pause the suspense and let you know guy what is Kirk. Kirk is a new WordPress version 5.3. WordPress 5.3! Named \u201cKirk\u201d in honor of jazz multi-instrumentalist Rahsaan Roland Kirk, the latest and greatest version\u2026","rel":"","context":"In &quot;Wordpress&quot;","block_context":{"text":"Wordpress","link":"https:\/\/phpyouth.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"wordpress kirk","src":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2019\/11\/5.3-album-cover.png?fit=768%2C768&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2019\/11\/5.3-album-cover.png?fit=768%2C768&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2019\/11\/5.3-album-cover.png?fit=768%2C768&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2019\/11\/5.3-album-cover.png?fit=768%2C768&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":5639,"url":"https:\/\/phpyouth.com\/blog\/create-wordpress-admin-user-through-ftp\/","url_meta":{"origin":4841,"position":5},"title":"Create WordPress Admin User Through FTP","author":"RK Jajoria","date":"July 12, 2022","format":false,"excerpt":"Hello friends, Today in this article, we will learn how to create WordPress admin users through FTP. FTP will help us to create a WordPress Admin User when we don't have any other access. You can explore our FTP tutorial if FTP(File Transfer Protocol) is a new thing to you.\u2026","rel":"","context":"In &quot;Wordpress&quot;","block_context":{"text":"Wordpress","link":"https:\/\/phpyouth.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"Create WordPress Admin User Through FTP","src":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/01\/Create-WordPress-Admin-User-Through-FTP.webp?fit=840%2C473&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/01\/Create-WordPress-Admin-User-Through-FTP.webp?fit=840%2C473&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/01\/Create-WordPress-Admin-User-Through-FTP.webp?fit=840%2C473&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/phpyouth.com\/blog\/wp-content\/uploads\/2026\/01\/Create-WordPress-Admin-User-Through-FTP.webp?fit=840%2C473&ssl=1&resize=700%2C400 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/posts\/4841","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/comments?post=4841"}],"version-history":[{"count":10,"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/posts\/4841\/revisions"}],"predecessor-version":[{"id":12670,"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/posts\/4841\/revisions\/12670"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/media\/4865"}],"wp:attachment":[{"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/media?parent=4841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/categories?post=4841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phpyouth.com\/blog\/wp-json\/wp\/v2\/tags?post=4841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}