That abundance of choice is both exciting and overwhelming. New platforms appear almost weekly, each promising to be faster, easier, or more powerful than the last. Whether you’re a business owner trying to choose the right platform, a developer expanding your technical knowledge, or simply curious about the modern web ecosystem, it can be difficult to understand how everything fits together.

This guide was created to serve as a living reference for the modern web platform landscape. Rather than ranking platforms from best to worst, it organizes them into logical categories and explains the role each type of platform plays. You’ll discover where AI tools fit into the ecosystem, how website builders differ from content management systems, when headless architecture makes sense, and which platforms specialize in areas like eCommerce, cloud computing, marketing, analytics, automation, and more.

No single platform is perfect for every project. Each exists because it solves a different set of problems. Understanding those differences is the first step toward making better technology decisions—and this guide is designed to help you do exactly that.

AI Platforms

AI Website Builders

These use AI to generate websites, layouts, copy, landing pages, or full web experiences.

• Dora.run
• Base44
• Hydra OS
• RedRaven.ai
• Wix AI Website Builder
• Squarespace Blueprint AI
• Hostinger AI Website Builder
• Durable
• 10Web AI Builder
• Framer AI
• Jimdo Dolphin
• Bookmark AiDA

AI Design Tools

These tools help generate, refine, or accelerate visual design, UI layouts, wireframes, and product interfaces.

• Google Stitch
  • AI UI generation
  • Converts prompts into interface designs
• Figma AI
  • AI-assisted design workflows
  • Design generation, rewriting, search, and organization
• Framer AI
  • Prompt-to-website generation
  • Design and publishing in one platform
• Uizard
  • AI wireframing and prototyping
  • Turns prompts and sketches into UI mockups
• Galileo AI
  • Prompt-to-interface generation
  • Product UI exploration
• Visily
  • AI wireframes and mockups
  • Collaboration-friendly product design
• Motiff AI
  • AI-assisted interface design
  • Design collaboration and prototyping
• Canva Magic Design
  • AI-assisted visual content creation
  • Fast marketing graphics and layouts

AI App Builders and Prompt-to-Application Platforms

These platforms generate functional applications, prototypes, or code-backed web apps from natural language prompts.

• Lovable
• Bolt.new
• v0 by Vercel
• Base44
• Replit Agent
• Cursor
• Windsurf

AI Development Tools

These tools assist developers with coding, debugging, refactoring, documentation, and application development.

• Google AntiGravity
  • AI coding/IDE assistant
• GitHub Copilot
• Cursor
• Windsurf
• Claude Code
• Cline
• Roo Code
• Aider
• Amazon Q Developer
• Gemini Code Assist
• Continue.dev
• Warp
• Replit

AI Model Platforms

Platforms for hosting, running, training, accessing, or sharing AI models.

• Replicate
  • Run open-source AI models via API
  • Community model marketplace
• Hugging Face
• OpenAI API
• Anthropic API
• Google AI Studio
• OpenRouter
• Together AI
• Groq
• Fireworks AI
• Fal.ai
• Ollama
• LM Studio

Industry-Specific AI

Finance

• Datarails
  • AI-powered FP&A
  • Financial planning and forecasting
• Cube
• Mosaic
• Planful
• Vena

Sales

• Kira
  • AI sales coaching
  • Sales training
• Gong
• Clari
• Lavender
• Regie.ai
• Clay

Website Platforms

Traditional CMS

These generate HTML pages and include both frontend and backend content management.

Open Source and Flexible CMS Platforms

• WordPress
  • Huge ecosystem
  • Plugins
  • Flexible
  • Good for nearly everything
• Drupal
  • Enterprise
  • Government
  • Strong permissions/security
• Joomla
• TYPO3
• ProcessWire
• Ghost
• Umbraco
• Statamic
• Craft CMS
• ExpressionEngine

eCommerce Platforms

Platforms for building online stores, processing orders, managing products, and selling online.

Hosted eCommerce Platforms

• Shopify
  • Best all-around hosted eCommerce platform
  • Excellent ecosystem
  • Limited backend flexibility compared to custom development
• BigCommerce
• Squarespace Commerce
• Wix Stores
• Ecwid
• Shift4Shop

Open Source and Self-Hosted eCommerce Platforms

• WordPress + WooCommerce
• Magento / Adobe Commerce
• OpenCart
• PrestaShop
• Shopware
• Sylius
• Medusa
• Saleor

Visual Website Builders

Low-code and no-code website builders for creating websites visually.

Consumer Website Builders

These are generally aimed at small business owners, solo operators, and non-technical users who want an easier all-in-one website builder.

• Wix
• Squarespace
• Weebly
• Jimdo
• SITE123
• Hostinger Website Builder
• GoDaddy Websites + Marketing
• Webnode

Professional Visual Website Builders

These are generally more popular with designers, agencies, and teams that want more visual control and stronger design flexibility.

• Webflow
  • Visual designer
  • CMS
  • Hosting
  • Strong marketing sites
• Framer
• Readymag
• Editor X

WordPress Visual Builders

These are visual builders inside the WordPress ecosystem.

• Elementor
• Divi
• Bricks Builder
• Breakdance
• Beaver Builder
• Oxygen
• WPBakery
• GenerateBlocks
• Kadence Blocks
• Spectra

Headless CMS

API-first content platforms for delivering content to websites, apps, and other digital channels.

• Strapi
  • Open source
  • Self-hosted
  • Developer-focused
• Prismic
  • Slice/component architecture
  • Excellent editing experience
  • Multi-channel publishing
• Sanity.io
  • Structured content
  • Real-time collaboration
  • Excellent React integration
• Contentful
• DatoCMS
• Directus
• Payload CMS
• Hygraph
• Storyblok
• ButterCMS
• Cosmic
• TinaCMS
• Decap CMS

Website Templates

Starter Kits

Prebuilt website templates, starter themes, and design kits for accelerating website builds.

• Kitstarter.io
• Envato Elements
• ThemeForest
• Astra Starter Templates
• Kadence Starter Templates
• GeneratePress Site Library
• Framer Templates
• Webflow Templates
• Relume Library
• Untitled UI

Business Platforms

All-in-One Business Platforms

These combine websites, CRM, email, automation, payments, funnels, scheduling, communities, or course delivery.

• Kajabi
  • Courses
  • Memberships
  • Coaching
  • Community
  • Podcasts
  • Email
  • Funnels
  • Website
  • Landing pages
  • Payments
  • Analytics
  • Mobile app
• GoHighLevel
  • CRM
  • Marketing automation
  • Websites
  • Funnels
  • Email
  • SMS
  • Scheduling
  • Reputation management
• HubSpot
• Zoho One
• ClickFunnels
• Kartra
• Systeme.io
• Podia

Online Course Platforms

Platforms focused primarily on education, course delivery, coaching, communities, and digital learning products.

• Thinkific
• Teachable
• Kajabi
• LearnWorlds
• Podia
• Mighty Networks
• Circle
• Skool
• LearnDash
• LifterLMS

Development Platforms

Backend Frameworks

PHP

• Laravel
  • Modern PHP framework
  • MVC
  • APIs
  • SaaS
  • Enterprise applications
• Symfony
• CodeIgniter
• CakePHP

JavaScript / TypeScript

• Node.js
• Express
• NestJS
• Fastify
• Hono

Python

• Django
• Flask
• FastAPI

Ruby

• Ruby on Rails

Frontend Frameworks

• React
• Next.js
• Vue
• Nuxt
• Angular
• Svelte
• SvelteKit
• Astro
• SolidJS
• Qwik
• Remix

Backend as a Service (BaaS)

Managed backend infrastructure for databases, authentication, storage, APIs, serverless functions, and realtime features.

• Supabase
  • PostgreSQL
  • Authentication
  • Storage
  • Edge Functions
  • Realtime
• AWS Amplify
  • Authentication
  • Storage
  • APIs
  • Hosting
• Firebase
• Appwrite
• PocketBase
• Convex
• Backendless
• Nhost

Cloud Computing

Serverless Computing

• AWS Lambda
• Cloudflare Workers
• Vercel Functions
• Netlify Functions
• Azure Functions
• Google Cloud Functions
• Deno Deploy

Deployment Platforms

• Vercel
  • Frontend deployment
  • Next.js
  • Edge functions
  • CDN
• Netlify
• Cloudflare Pages
• Render
• Railway
• Fly.io
• Firebase Hosting
• AWS Amplify Hosting
• DigitalOcean App Platform

Cloud Infrastructure Providers

• Amazon Web Services
• Google Cloud Platform
• Microsoft Azure
• DigitalOcean
• Linode / Akamai
• Hetzner
• Vultr
• Oracle Cloud

Integration Platforms

Healthcare Integration

• Mirth Connect
  • HL7
  • Healthcare messaging
  • EMR/EHR integrations
• Redox
• Health Gorilla
• Particle Health
• Rhapsody

General Integration Platforms

• Zapier
• Make
• n8n
• Pipedream
• Workato
• Tray.io
• MuleSoft
• Boomi

Productivity

Documentation & Knowledge Bases

• Notion
  • Notes
  • Wiki
  • Project management
  • Documentation
• Confluence
• Slab
• GitBook
• Outline
• Obsidian
• Coda
• BookStack
• Guru

Payments

Payment Processors

• Stripe
• PayPal
• Authorize.net
• Square
• Braintree
• Adyen
• Elavon
• Clover
• Worldpay
• Helcim
• Payoneer
• 2Checkout / Verifone

WordPress Plugins

Booking & Scheduling

• Amelia
• Sugar Calendar
• Bookly
• Simply Schedule Appointments
• The Events Calendar
• Modern Events Calendar
• Event Espresso
• LatePoint
• BookingPress

Forms

• Gravity Forms
• Fluent Forms
• WPForms
• Formidable Forms
• Ninja Forms
• WS Form
• Contact Form 7

SEO

• Yoast SEO
• Rank Math
• All in One SEO
• The SEO Framework
• SEOPress

Performance and Caching

• WP Rocket
• W3 Total Cache
• LiteSpeed Cache
• Perfmatters
• Autoptimize
• FlyingPress

Time Tracking

Harvest Alternatives

• Clockify
• Toggl Track
• Harvest
• Timely
• RescueTime
• Hubstaff
• Time Doctor
• Everhour

Additional Categories

CSS Frameworks

• Tailwind CSS
• Bootstrap
• Bulma
• Foundation
• Open Props
• Pico CSS

UI Component Libraries

• Shadcn/ui
• Material UI
• Chakra UI
• Mantine
• Ant Design
• Radix UI
• Headless UI
• DaisyUI

Databases

• PostgreSQL
• MySQL
• MariaDB
• SQLite
• MongoDB
• Redis
• PlanetScale
• Neon
• Supabase Database

Authentication

• Clerk
• Auth0
• Supabase Auth
• Firebase Auth
• Better Auth
• NextAuth.js / Auth.js
• Stytch
• WorkOS

Email Platforms

• Brevo
• Mailchimp
• Kit
• Klaviyo
• ActiveCampaign
• MailerLite
• Campaign Monitor
• Constant Contact
• Omnisend

Transactional Email

• SendGrid
• Mailgun
• Postmark
• Amazon SES
• Resend
• Brevo
• Mandrill

CRM Platforms

• HubSpot
• Salesforce
• Pipedrive
• Zoho CRM
• GoHighLevel
• Keap
• Freshsales
• Copper
• Close

Marketing Automation

• HubSpot
• ActiveCampaign
• Klaviyo
• Brevo
• Mailchimp
• Marketo
• Pardot / Account Engagement
• Customer.io
• Drip

Hosting

• Cloudways
• Kinsta
• WP Engine
• SiteGround
• Liquid Web
• DigitalOcean
• Hetzner
• Linode
• Vultr
• Flywheel
• Pressable
• Rocket.net

CDN / Edge

• Cloudflare
• Bunny.net
• Fastly
• Akamai
• Amazon CloudFront
• KeyCDN

Analytics

• Google Analytics
• Plausible
• Fathom
• PostHog
• Mixpanel
• Matomo
• Amplitude
• Microsoft Clarity
• Hotjar
• FullStory

Search

• Algolia
• Typesense
• Meilisearch
• ElasticSearch
• OpenSearch
• SearchWP

Forms

• Gravity Forms
• Fluent Forms
• Formidable Forms
• Typeform
• Jotform
• Tally
• Fillout
• Paperform
• Google Forms

Automation

• Zapier
• Make
• n8n
• Pipedream
• Activepieces
• Relay.app
• IFTTT

Design

• Figma
• Penpot
• Canva
• Framer
• Adobe XD
• Sketch
• Affinity Designer
• InVision

Headless Commerce

• Commerce Layer
• Medusa
• Saleor
• Shopify Hydrogen
• BigCommerce Catalyst
• Elastic Path
• Commercetools

Static Site Generators

• Astro
• Gatsby
• Hugo
• Eleventy
• Jekyll
• Next.js static export
• Nuxt Content

DevOps

• Docker
• GitHub Actions
• GitLab CI
• Terraform
• Kubernetes
• Ansible
• Jenkins
• CircleCI

Add A WordPress Gallery Plugin

First things first, you’ll need to download a gallery plugin. “But why Jaroncito? Why do we need to add a gallery plugin to our website if Divi has a gallery module?”

Great question! I’ll tell you. We need to be able to add galleries to the Divi Tabs module. You can’t go embedding Divi modules within other Divi module you silly goose! Well…technically you can, but that is a conversation for another time.

There are many WordPress gallery plugin options out there. I’ll be using FooGallery in this guide which can be found at the WordPress plugin repository here.

Simply download that badraddery from the WordPress plugin page, upload to your website, and activate to get started. Or, you can download it directly to your website by going to your WordPress dashboard, clicking on Plugins, then clicking the “Add New Plugin” button in the top left of the screen.

Search for “FooGallery” on the next screen and download this badboy.

Now your ready to make some galleries! Awwww yeeeeeah!

Create A FooGallery Image Gallery

To create your first gallery, hover on “FooGallery” and click on “Add Gallery”.

Go ahead and give your gallery a title and start adding images straight from the website media library or from images stored on your computer.

There are a lot of customization settings on the free version of FooGallery that you can tinker with to dial in how you would like to display your image gallery.

Once your images are added to your gallery go ahead and hit the blue “Publish” button to publish your gallery.

Once published, you’ll now have a “Gallery Shortcode” that we’ll need in the following steps.

Add the Divi Tabs Module To Your Page

Ooookay. Moving right along.

Let’s now add a Divi Tabs module to our page.

Once added, hot on into those tab settings and let’s add us some image gallery shortcode!

In the Tabs module settings, click the gear icon next to the first default tab.

Update the Title to whatever you’d like to display on the filterable image gallery tab. e.g. “Poopies” in my example.

Next, we’re going to add the image gallery shortcode to the Tabs module. Go ahead and paste that into the “Body” field.

Huzzah! If you are using the Divi Visual Builder, you should now see your FooGallery appear. Well done!

Add Additional Tabs The Divi Filterable Image Gallery

Now it wouldn’t quite be a Divi filterable image gallery unless we added more tabs to our filter. I mean, for goodness sakes, that would just be a standard gallery!

Go ahead and rinse and repeat the above steps; create more FooGallery galleries, add additional tabs to your Divi Tabs module, paste gallery shortcodes into the tabs.

Before you know it, you’ll have a beautiful Divi Filterable Image Gallery!

I’m not crying. You’re crying.

It’s…sniff…beautiful…

You can also get creative with the built in Divi Tabs design settings as well as your own css to achieve a more desirable appearance.

Very nice indeed!

If you disagree, maybe this guide isn’t for you?

Or, maybe you are just Divi curious and heard that you can build dynamic layouts with ACF data and think that is rad.

Either way, the dynamic content feature in Divi, and now the Divi Theme Builder is a game-changer as you can create custom layouts that will pull in dynamic content from any of the standard Divi post fields.

You can also now dynamically insert ACF data into Divi layouts. Fantastic.

Building Divi layouts that make use of dynamic text content is very straight forward. Load up your text module, click on the “Use Dynamic Content” icon, and select the field you’d like to dynamically insert into the text module.

It couldn’t be easier.

However, much less easy is figuring out how how to use a Divi image module to display an image set by an ACF field.

By default, you can dynamically insert the post/page Featured Image, Author Profile Picture, or Site Logo.

If you only need to dynamically insert one image into your Divi Layout, then you could use the post/page’s Featured Image.

However, if you need more than one featured image to dynamically load into your Divi Layout, then you are up a creek without one of those paddle things.

But, what if I told you there is a solution?

Hey you. There is a solution!

We’ve all been trying out different combinations of ACF fields, settings, Divi modules, using the “Before” and “After” fields in the text module after selecting your ACF field.

However, they all end in failure! Either the rendered output shows the raw <img rel=”lightbox” src=https://thisimageurl.com/img/le-image” /> html, or it simply doesn’t show anything but a big fat blank area where your image should be loading.

I’ll show you how to dynamically insert images from an ACF field into your Divi layout in 5 simple steps!

Let’s go gang!

Step 1 – Create Your ACF Field

Add a new ACF field and give it whatever name makes sense to you.

You may be tempted to set the Field Type as a URL or even an image.

Resist this temptation!

You’re going to set the Field Type to “Text”. Yes. That’s right. A simple text field.

Step 2 Insert A Divi Image Module Into Your Layout

Head on over to the Divi layout that uses the ACF field group.

Create a new image module.

Step 3 Set Your Image Module To Dynamically Show Your ACF Field

The new image module will show a placeholder image. Hover on the placeholder image and click the garbage can icon that appears.

Next, click on the “Add Dynamic Content” icon. Scroll down and select the ACF field you created for your image.

Save the module. If you’ve already created a page/post that has a value in the image ACF field, that image it will probably load in your layout visual builder. No worries, completely normal.

Save the layout.

Step 4 Create A Post That Includes The Image ACF Field

Create a page/post that uses the ACF field group as well as the Divi layout.

When you get to your image ACF text field, simply add the image URL from your media library. You can even make this a relative URL by dropping the https://domain.com from the image URL and leaving the rest.

Save the page/post.

Step 5 Observe Your Victory By Viewing The Image Dynamically Loaded From An ACF Field Through Your Divi Layout

Go ahead. Visit that page/post. Be sure to clear your cache. It’ll work. I promise. If it doesn’t, then you screwed something up because these instructions are rock solid!

That isn’t what you are hearing?

Interesting.

I must live in an echo chamber then because that is what I hear quite a bit.

Anywho. We’re here to talk about using Advanced Custom Fields in Divi Layouts, including the Divi Theme Builder.

Divi Dynamic Content Quick Overview

The Divi Theme and Divi Page Builder have the power to pull in WordPress Page/Post fields dynamically.

The Elegant Themes blog has an excellent post that covers the basics of using dynamic content in your Divi Layouts. Check it out.

Basically, you can add the standard post type (Page, Post, Project) fields to your Divi Layouts and pull in their values dynamically.

You can even use WooCommerce product post type data in your Divi Layouts.

This gives you full design control over the appearance of your blog posts, blog category pages, WooCommerce product pages, WooCommerce category pages, WooCommerce Cart and Checkout Pages, and virtually any standard WordPress page template.

Awesome!

Divi And Advanced Custom Fields (ACF) Extends Dynamic Content

Oooooh boy. Now, we have the power to use ACF fields in our Divi Layouts including the Divi Theme Builder!

The best part is that this feature is supported natively in the Divi Theme!

This means that we are no longer limited to the standard WordPress post type fields in our Divi Layouts. We can create unlimited custom fields and use them in our Divi layouts. Fantastic!

For example, say you wanted to give your blog post a sub-header below the Post Title. There is no “sub-header” standard field when creating a new blog post.

This is problematic if you are using a Divi Theme Builder template for your blog posts. We need to use the power of dynamic content to speed up our builds and content deployment!

Also, it really isn’t the best idea to use regular ol Divi to build blog posts. Why? Why, you ask??!?! Oh, I’ll tell you why.

Once you use a drag and drop builder on your posts they become loaded with short-codes. If you then try to migrate those posts into another theme you are going to have a very bad time.

You could, of course, create your first blog post, save the layout as a template, and then re-use that template on every blog post thereafter.

But, we all know the pitfall of that method. If you need to make one design change in the blog post layout, you’ll need to make it on each and every blog post you’ve posted that used the copied layout

Lame.

There must be as better way! There is.

Back to the example. To achieve the blog post title sub-header, we can create and insert an ACF field in our Divi Theme Builder Layout to dynamically pull in the blog post sub-header value.

Giddyup. Let’s get it done cowpeople.

Install Advanced Custom Feilds – ACF

First things first. We need to install the Advanced Custom Fields plugin. You know the drill. Or, perhaps you don’t know the drill.

Click on your “Plugins” link in the WordPress admin menu.

Click “Add New” to access the searchable plugin page. Do a search for “Advanced Custom Fields”.

The first result should be the correct plugin. The plugin author is Elliot Condon. If that is what you see, then click on “Install Now”.

The plugin will install. Success! Be sure to click on the blue “Activate” button as well.

Congratulations, you’ve successfully installed the Advanced Custom Fields plugin!

Create An ACF Field Group

The next thing you are going to want to do is to create an Advanced Custom Fields field group.

What is a field group you ask yourself sheepishly? Think of a field group as a group of fields that you’ll use on the same post type or category.

For example, you can create a field group for a category of blogs called “Homes” on your website that lists homes for sale.

Or, perhaps you want to create a field group for the Insurance Agents that work for the insurance agency that you are building the website for.

It’s that simple!

Within a field group, you’ll have the opportunity to create fields that you’ll use to populate content on the posts/pages that use the page template that you assign the field group to.

So, the flow is the following. A post type has a field group assigned to it. Within a field group, you create fields.

Using one of the examples above, we could create the following filed under our “Insurance Agent” field group.

• Name – Text Field Type
• Phone – Number Field Type
• Headshot – Image Field Type
• Bio – Textbox Field Type

Then, you can assign this Insurance Agent filed group to show on posts within your post category “Insurance Agent”.

Use Your ACF Fields In Your Divi Layout

The next step is to call your ACF fields into your Divi modules using the Dynamic Content feature.

To do so, add a Divi module that corresponds with the ACF field you will be using in that section. For example, if you want to use the “Name” ACF field, you will add a text module to your Divi Layout.

With the module settings open, click on the “triple pancake” icon in the top right of the text box. This will open the Dynamic Content option. You will be presented with a list of dynamic content options.

The ACF fields will be at the bottom of this list. Scroll down to see them.

Select the ACF field that you will be using in this template.

What are the Before and After fields used for you ask? I will tell you. YOu can insert HTML into those fields to modify the tag.

For example. If you’d like the “Name” ACF field to be an h tag such as a <h3>, then add <h3> to the before field and </h3> to the after field.

This will wrap your ACF content with an <h3> open and close tag.

Advanced ACF Field Insertion Using Shortcodes

The above method works well are placing a fixed piece of content in an area on your template that doesn’t interact with other content.

HOwever, what do you do if you need to play dynamic content within your text?! WHAT THEN!?

Thankfully, you can use ACF Field shortcodes within your Divi content to dynamically insert ACF fields throughout your Divi content!

Awesome stuff!

Do do so, all you do is add the ACF shortcode into your content in the following way:

[acf field=”field_name”]

Replace the “field_name” with the actual name of your ACF field.

Using the example above, say you wanted to add the Insurance reps name into a standard template that appears on every insurance reps page.

To do this, you will simply add the shortcode into the content where you would like the Insurance Reps name to appear.

For example. “All of our insurance reps are certified. [acf field=”name”] has shown proficiency in client management, vehicle damage assessment, and blah blah blah.

It’s that simple!

Conclusion

Now that you know how to use ACF fields into Divi layouts, the world is your oyster! No, but for reals guys, it opens up the door to many many possibilities and customizations.

Go forth and conquer le ThriftyWP army!

Yet, you do not see the desired white lock icon in your address bar. Instead, you see an upside-down exclamation point in a circle!

On further inspection, you are told that “Your connection to this site is not secure.”

What? Why not? You did all the right things! What the cow is going on here?

Well, let’s figure that out.

A “Your connection to this site is not fully secure” message usually means that the web browser has loaded both secure (https) resources as well as nonsecure (http) resources.

As it has not loaded 100% secure resources, it cannot display the lock icon.

Read on to learn how to diagnose the issue as well as find out how to fix it.

How To Use Your Browser Inspector

The first thing you want to do is figure out why the browser is displaying the error. To do so, you need to open up your browser inspector and look at the console.

This guide will focus on the Google Chrome browser. If you don’t have Google Chrome and would like to try it, click on that link to go to the download page.

Google Chrome dominates the web browser market at around 65% of web traffic at the time this article was written.

In Chrome or your browser of choice, right-click anywhere on your web page or the target webpage you want to diagnose.

Next, click on the “Inspect” link.

This will bring up the Dev Tools – inspector window. The window will be full of all sorts of useful information. However, we are only going to take a look at a couple of tabs to help us diagnose our https security issue.

Let’s first click on the “Security” tab in the Dev Tools – Inspector window. We want to make sure that our SSL certificate has loaded and is not the reason for the https issue.

The security tab should be the second tab from the right. If you instead see “>>” as the last tab, your browser window is not wide enough to display all of the tabs.

In this case, either grab the edge of your browser window and make it wider or, click on the “>>” tab which will produce a drop-down menu of the remaining tabs. Click on “Security.”

If your SSL certificate has loaded and is operating as it should, you’ll probably see something like the following.

Congratulations! It isn’t an issue with your SSL certificate.

Next, click on the second tab from the left titled “Console.”

On this tab, you’ll see a list of all of the issues and errors the browser has identified on the webpage you targeted.

Read on to learn to find the right information.

Look For https Specific Errors

There may be several issues/errors found by the browser on any specific webpage. Hopefully, this is not the case on your own website.

You are going to look for a specific error message on the console tab. It will say “Mixed Content: The page at ‘https://otherdomain.com/’ was loaded over HTTPS, but requested an insecure image ‘http://otherdomain.com/wp-content/uploads/2019/05/otherdomain-Logo.png’. This content should also be served over HTTPS.”

Wowzers. What does all of this mean? Basically, your website wants to load everything over the secure https protocol. However, some resources are not set to load over https. Darn.

This can happen for a variety of reasons, such as:

• You created your website without an SSL certificate, and later someone did the bare minimum to move your website to https (they pretty much only updated the home and site URL in WordPress)
• You have hard-coded URLs in your website files. Common occurrences are CSS file background URLs as well as fonts.
• Your theme loads the logo and favicon through its theme settings, which for some reason, are outside of the database and other theme files.

The https error in the console will point you in the right direction. Let’s see what info we can glean from the https errors listed above.

We see that each of the mixed content https issues all refer to the same logo file. That helps narrow it down. I know that the website is built on Divi and that Divi uses theme settings to place the logo URL.

With this information, I could fix the https issue by visiting the website theme options and updating the logo file URL to https.

Hopefully, your fix is this easy. If not, keep reading to learn how to fix your insecure resources.

Fix https Errors Using WP CLI Command Line

Quick note: Grab an export of your database before performing any of the following fixes. I’ve not had problems with the below methods, but you never know. Better to be safe than sorry. 

My personal belief is to fix the problem at the root. Otherwise, you are just covering up the problem and hoping that it doesn’t resurface at some point in the future.

This method requires that you have root access to the server where your website is hosted. You will also need to be able to login to the server via ssh.

Your server must also have the WP CLI (WordPress Command Line Interface) interface installed.

Most major website hosts that I’ve used or worked with have WP CLI installed.

Once logged into the server via ssh, navigate to the root directory of your WordPress install. This should be the directory with your wp-config.php file in it. Then, simply enter the following command:

wp search-replace http:// https://

This command will crawl through your database and replace all instances of “http://” with “https://”.

This method will usually fix any https issue that your browser has. However, there are sometimes exceptions.

Some themes pull in the website Logo and Favicon via theme specific pages.

If you still have an https error after running the above WP CLI search-replace command, inspect your webpage once again. If the issue references your logo or favicon image file, you simply need to update the file URL in your theme settings.

For example, the Divi theme sets the website logo in the theme options. The search-replace WP CLI command will not update the logo file URL. You must navigate to the Divi theme options to manually update the logo file URL.

Fix https Errors Using A Plugin

Quick note: Grab an export of your database before performing any of the following fixes. I’ve not had problems with the below methods, but you never know. Better to be safe than sorry. 

Okay. Perhaps you don’t have root access to your hosting server. Or, perchance, you have no idea what SSH access is, how to turn it on, or how to create and upload a key to the server.

Understandable.

This option is usually just as good.

There are two different groups of plugins that can help you fix your website https issues:

1. Those that update your database resource URLs similar to the WP CLI method explained above.
2. Those that update the URL by some other means.

We’ll go over the different plugin options below.

Plugins That Update Your Database Resource URLs

These plugins allow you to perform the same search-replace as the WP CLI command.

1. Better Search Replace.
2. Velvet Blues.

Better Search Replace

Install the plugin. Navigate to your plugins page, click on “Add New”, search for the plugin, then click “Install Now”. Activate the plugin.

Hext, hover on “Tools” in your dashboard menu. You should now see a link for “Better Search Replace.” Click that link.

On the next screen, do the following:

• Search For: http://
• Replace With: https://
• Select Tables: Select all of the tables. You really only need to select the wp_posts and wp_postmeta  tables, but select them all just in case there are some hidden http urls hiding in other tables (e.g. you are using other plugins that have their own database tables)
• Case-Insensitive?: Click the checkbox. You want to grab any case variations of http and https.
• Replace GUIDs: Leave this unchecked.
• Run as dry run?: Keep this checked. It will show you how many instances of your search show up in each table.

Click the “Run Search/Replace” button.

You’ll get the Dry Run results at the top of the page.

Click on the “Click here” link to see in what tables the update will run.

Look at that! There are instances of http in the wp_comments and wp_options tables as well! Good thing we selected all of the database tables!

If you are satisfied with the resulsts, scroll down to the bottom of the Better Search Replace settings page and uncheck the “Run as dry run?” checkbox.

Click the “Run Reach/Replace” button again.

Go back to your home page, clear your browser cache, and refresh your page. You should be set with the nice lock icon in the address bar! Hooray!

Velvet Blues

The process begins the same. Install the plugin. Navigate to your plugins page, click on “Add New”, search for the plugin, then click “Install Now”. Activate the plugin.

Hext, hover on “Tools” in your dashboard menu. You should now see a link for “Update URLs.” Click that link.

On the next screen, do the following:

• Old URL: http://
• New URL: https://
• URLs in page content ( posts, pages, custom post types, revisions ): Check the checkbox
• URLs in excerpts: Check the checkbox
• URLs in links: Check the checkbox
• URLs for attachments ( images, documents, general media ): Check the checkbox
• URLs in custom fields and meta boxes: Check the checkbox
• Update ALL GUIDs: DONT check the checkbox

See. Like this.

Once that is done, click the “Update URLs NOW” button.

You’ll get a success report of what Velvet Blues was able to update.

Navigate to the webpage that was not fully secure, clear your browser cache, refresh the page and voila! You should now have the nice lock icon in your address bar.

Plugins That Update Your Database URLs by some other means

The above methods should cure what ales you. However, some https issues can be stubborn.

If you still aren’t seeing the lock icon in your address bar are still plagued by the circled upside-down exclamation point, read on! We’ll find a solution that works.

I do believe that the above solutions should be tried and implemented first. While the solutions that are presented below should work where the solutions above fail, the solutions above are addressing the root of the problem.

This next plugin will force all resources load via https regardless of what their URL says (except for hard-coded URLs in files – such as your style.css)

1. Really Simple SSL.

Really Simple SSL

As always, you need to install this plugin. Go to your plugins page, click on “Add New” and search for “Really Simple SSL.” Well done!

Go ahead and activate that bad rad.

You’ll then be presented with the following screen letting you know what it will and won’t fix. Again, if you have hardcoded URLs in your CSS or JS files, you’ll need to fix those manually.

Ready? Click on the “Go ahead, activate SSL!” In most situations, that is all you will have to do! This plugin does wonders.

Why is that?

Click on the settings page on the next screen after activation. It will look like this. There are several settings here. We’ll just be writing about the first two. In most scenarios, you won’t have to mess with any other settings.

See that first setting? “Mixed content fixer”. That lil guy does wonders. It recognizes the mixed content your browser is loading and forces it to load via https! Awesome possum.

Conclusion

If you’ve made it this far, there is a 98% chance you’ve resolved your https issue.

Why do I believe that? Because these solutions have solved 98% of the https issues that I’ve encountered.

If you found this content useful, then perhaps leave a comment or something and be like “I found this content useful.” Then I’ll be like, “Awesome.”