Posted on

How To Quickly Set Up, Use & Resell Webmail: A Guide For Agencies And Resellers

Webmail is a robust IMAP-based email service and the latest exciting addition to WPMU DEV’s all-in-one WordPress management platform product suite.

In this comprehensive guide, we show you how to get started with Webmail, how to use its features, and how to resell professional business email to clients. We also provide information on the benefits of offering IMAP-based email services for WPMU DEV platform users and resellers.

Read the full article to learn all about Webmail or click on one of the links below to jump to any section:

Overview of Webmail

In addition to our current email hosting offerings, Webmail is a standalone service for Agency plan members that allows for greater flexibility in email account creation.

WPMU DEV’s Webmail:

  • Is affordably priced
  • Offers a superior email service with high standards of quality and reliability.
  • Does not require a third-party app to work.
  • Lets you set up email accounts on any domain you own or manage, whether it’s a root domain like mydomain.com or a subdomain such as store.mydomain.com.
  • Lets you provide clients with professional business email no matter where their domain is hosted (or whether the domain is associated with a site in your Hub or not)
  • Can be accessed from any device, even directly from your web browser.
  • Can be white labeled and resold under your own brand with Reseller.

Read more about the benefits of using Webmail.

Let’s show you now how to set your clients up with email accounts and a fully-functional mailbox in just a few clicks, using any domain, and no matter where their domain is hosted.

Getting Started With Webmail

Webmail is very quick and easy to set up.

If you’re an Agency member, just head on over to The Hub.

Now, all you need to do is get acquainted with the latest powerful tool in your complete WordPress site management toolbox…

Webmail Manager

The Hub lets you create, manage, and access IMAP email accounts for any domain you own from one central location, even domains that are not directly associated with a site in your Hub.

Click on Webmail on the main menu at the top of the screen…

The Hub - Webmail
Click Webmail to set up and manage your emails.

This will bring you to the Webmail Overview screen.

If you haven’t set up an email account yet, you’ll see the screen below. Click on the “Create New Email” button to get started.

Webmail screen with no email accounts set up yet!
Click the button to create a new email account in Webmail.

As mentioned earlier, Webmail gives you the choice of creating an email account from a domain you manage in The Hub, or a domain managed elsewhere.

For this tutorial, we’ll select a domain being managed in The Hub.

Select the domain you want to associate your email account with from the dropdown menu and click the arrow to continue.

Create New Email screen - Step 1 of 2
Select a domain managed in The Hub or elsewhere.

Next, create your email address, choose a strong password, and click on the blue arrow button to continue.

Create New Email screen - Step 2 of 2
Add your username and password to create your email address.

You will see a payment screen displaying the cost of your new email address and billing start date. Click the button to make the payment and create your new email account.

Email account payment screen.
Make the payment to complete setting up your email account.

Your new email account will be automatically created after payment has been successfully processed.

New user email has been created successfully.
Our new email has been created successfully…we’re in business!

The last step to make your email work correctly is to add the correct DNS records.

Fortunately, if your site or domain are hosted with WPMU DEV, Webmail Manager can easily and automatically do this for you too!

Note: If your domain is managed elsewhere, you will need to copy and manually add the DNS records at your registrar or DNS manager (e.g. Cloudflare).

Click on the View DNS Records button to continue.

This will bring up the DNS Records screen.

As our example site is hosted with WPMU DEV, all you need to do is click on the ADD DNS Records button and your records will be automatically created and added to your email account.

DNS Records screen - Add DNS Records button selected.
If your domain is hosted with WPMU DEV click the button to automatically add the correct DNS records to make your email work.

After completing this step, wait for the DNS records to propagate successfully before verifying the DNS.

You can use an online tool like https://dnschecker.org to check the DNS propagation status.

Note: DNS changes can take 24-48 hours to propagate across the internet, so allow some time for DNS propagation to occur, especially if the domain is hosted elsewhere.

Click the Verify DNS button to check if the DNS records have propagated.

DNS Records screen with Verify DNS button selected.
Click the Verify DNS button to check if your DNS records have propagated.

If your DNS records have propagated successfully, you will see green ticks for all records under the DNS Status column.

DNS Records screen showing green ticks in DNS Status for all records.
Your emails won’t be seen until all those ticks are green.

Your email account is now fully set up and ready to use.

Repeat the above process to create and add more emails.

Webmail overview screen showing an active domain.
Click on the + Create New Email button to add more emails.

Now that you know how to create a new email account, let’s look at how to manage your emails effectively.

Managing Your Emails

If you have set up one or more email accounts, navigate to the Webmail Manager screen any time to view a list of all connected domains, their status, number of email accounts associated with each domain, and additional options.

Webmail screen with added domain email accounts.
Manage all of your email accounts in the Webmail overview screen.

To manage your email accounts, click on a domain name or select Manage Domain Email from the Options dropdown menu (the vertical ellipsis icon).

Webmail screen - Manage Domain Email option selected.
Click on the vertical ellipsis and select Manage Domain Email to manage your email accounts.

This opens up the email management section for the selected domain.

The Email Accounts tab lists all the existing email accounts for that domain, status and creation date information, plus additional email management options that we’ll explore in a moment.

Webmail - Email Accounts tab
Email Accounts lists all the email accounts you have created for your domain.

Email accounts can have the following statuses: active, suspended, or disabled.

Active accounts can send and receive emails, provided DNS records have been set up and propagated correctly.

Suspended accounts occur if email activity is in violation of our webmail provider’s email sending policy.

A disabled account (see further below) only disables the sending and receiving of emails and webmail access for that email account. It does not affect billing.

Note: Unless you delete the account, you will still be charged for a disabled email account.

Email accounts tab listing email accounts with different statuses.
Email accounts can display an active, suspended, or disabled status.

Before we discuss managing individual email accounts, let’s look at other main features of Webmail Manager.

Email Forwarding

Email forwarding automatically redirects emails sent to one email address to another designated email address. It allows users to receive emails sent to a specific address without having to check multiple accounts. For example, emails sent to info@yourcompany.tld can be automatically forwarded to john@yourcompany.tld.

Every email account includes 10 email forwarders. This allows you to automatically forward emails to multiple addresses simultaneously (e.g. john@yourcompany.tld, accounts@yourcompany.tld, etc.).

To activate email forwarding hover over the arrow icon and turn its status to On and then click on Manage Email Forwarding to set up email forwarders.

Webmail - Email Accounts - Email Forwarding with status turned on and Manage Email Forwarding selected.
Turn Email Forwarding on and click on Manage Email Forwarding to set up forwarders for an email account.

This will bring up the Email Forwarding tab. Here, you can easily add, delete, and edit email forwarders.

If no email forwarders exist for your email account, click the Create Email Forwarder button to create the first one.

Email Forwarding screen with no forwarders set up yet.
Let’s create an email forwarder for this email account.

In the Add Email Forwarder screen, enter the forwarding email address where you would like incoming email messages to redirect to and click Save.

Webmail - Add Email Forwarder
You can create up to 10 email forwarders per email account.

As stated, you can add multiple forwarding email addresses to each email account (up to 10).

Webmail email forwarders.
Webmail’s Email Forwarding lets you easily add, delete, and edit email forwarders.

Webmail Login

With Webmail, all emails are stored on our servers, so in addition to being able to access and view emails on any device, every webmail account includes a mailbox that can be accessed online directly via Webmail’s web browser interface.

There are several ways to log in and view emails.

Access Webmail From The Hub

To log into webmail directly via The Hub, you can go to the Email Account Management > Email Accounts screen of your domain, click the envelope icon next to the email account, and click on the Webmail Login link…

Webmail - Email Accounts - Webmail Login
Click on the envelope icon in Email Accounts to access Webmail login.

Or, if you are working inside an individual email account, just click on the Webmail Login link displayed in all of the account’s management screens…

Webmail - Email Accounts - Email Information - Webmail Login
Click on the Webmail Login link of any email account management screen to access emails for that account.

This will log you directly into the webmail interface for that email account.

Webmail interface
Webmail’s intuitive and easy-to-use interface.

The Webmail interface should look familiar and feel intuitive to most users. If help using any of Webmail’s features is required, click the Help icon on the menu sidebar to access detailed help documentation.

Let’s look at other ways to access Webmail.

Access Webmail From The Hub Client

If you have set up your own branded client portal using The Hub Client plugin, your team members and clients can access and manage emails via Webmail with team user roles configured to give them access permissions and SSO (Single Sign-On) options enabled.

This allows users to seamlessly log into an email account from your client portal without having to enter login credentials.

Webmail menu link on a branded client portal.
Team members and clients can access Webmail directly from your own branded client portal.

Direct Access URL

Another way to log into Webmail is via Direct Access URL.

To access webmail directly from your web browser for any email account, enter the following URL into your browser exactly as shown here: https://webmail.yourwpsite.email/, then enter the email address and password, and click “Login.”

Webmail direct login
Log into webmail directly from your web browser.

Note: The above example uses our white labeled URL address webmail.yourwpsite.email to log into Webmail via a web browser. However, you can also brand your webmail accounts with your own domain so users can access their email from a URL like webmail.your-own-domain.tld.

For more details on how to set up your own branded domain URL, see our Webmail documentation.

Email Aliases

An email alias is a virtual email address that redirects emails to a primary email account. It serves as an alternative name for a single mailbox, enabling users to create multiple email addresses that all direct messages to the same inbox.

For instance, the following could all be aliases for the primary email address john@mysite.tld:

  • sales@mysite.tld
  • support@mysite.tld
  • info@mysite.tld

Webmail lets you create up to 10 email aliases per email account.

To create an alias for an email account, click on the vertical ellipsis icon and select Add Alias.

Webmail - Add Alias
Let’s add an alias to our email account.

Enter the alias username(s) you would like to create in the Add Alias modal and click Save.

Webmail - Add Alias screen with three aliases set up.
You can create up to 10 aliases for each email account.

Emails sent to any of these aliases will be delivered to your current email account.

Additional Email Management Features

In addition to the features and options found in the Email Accounts tab that we have just discussed, Webmail lets you manage various options and settings for each individual email account.

Let’s take a brief look at some of these options and settings.

Email Information

To manage an individual email account:

  1. Click on The Hub > Webmail to access the Email Accounts tab
  2. Click on the domain you have set up to use Webmail
  3. Click on the specific email account (i.e. the email address) you wish to manage.

Click on the Webmail management screens to access and manage individual email accounts.

The Email Information tab lets you edit your current email account and password and displays important information, such as status, creation date (this is the date your billing starts for this email account), storage used, and current email send limit.

Webmail - Email Accounts - Email Information tab.
Edit and view information about an individual email account in the Email Information tab.

In addition to the Email Information tab, you can click on the Email Forwarding tab to manage your email forwarders and the Email Aliases tab to manage your email aliases for your email account.

Note: Newly created accounts have send limits set up to prevent potential spamming and account suspension. These limits gradually increase over a two-week period, allowing email accounts to send up to 500 emails every 24 hours.

Email Information - Email limit increase.
Each email account’s send limits increase over two weeks and can send up to 500 emails per 24 hours.

Coming soon, you will also be able to add more storage to your email accounts if additional space is required.

Upgrade Storage modal
Upgrade your email account storage space (coming soon!)

Now that we have drilled down and looked at all the management tabs for an individual email account, let’s explore some additional features of the Webmail Manager.

Go back to The Hub > Webmail and click on one of the email accounts you have set up.

DNS Records

Click on the DNS Records tab to view the DNS Records of your email domain.

DNS Records Tab
Set up and verify your email DNS records in the DNS Records tab.

Note: The DNS Records tab is available to team members and client custom roles, so team members and clients can access these if you give them permission.

Configurations

Click on the Configurations tab to view and download configuration settings that allow you to set up email accounts in applications other than Webmail.

Webmail - Domain Email - Configurations
Download and use the configurations shown in this section to set up email accounts in other applications.

The Configurations tab is also available for both team member and client custom roles.

Client Association

If you want to allow clients to manage their own email accounts, you will need to set up your client account first, assign permissions to allow the client to view Webmail, then link the client account with the email domain in the Client Association tab.

After setting up your client in The Hub, navigate to the Client Association tab (The Hub > Webmail > Email Domain) and click on Add Client.

Webmail - Domain Email - Client Association
You can let clients manage their own email accounts by linking the email domain with their client account.

Select the client from the dropdown menu and click Add.

Webmail - Associate email with a client modal.
Linking the email domain with a client allows them to manage their email accounts.

Notes:

  • When you associate a client with an email domain, SSO for the email domain is disabled in The Hub. However, your client will be able to access Webmail login via The Hub Client plugin.
  • The Client Association tab is only made available for team member custom roles.

Reseller Integration

We’re currently working on bringing full auto-provisioning of emails to our Reseller platform. Until this feature is released, you can manually resell emails to clients and bill them using the Clients & Billing tool.

Once Webmail has been fully integrated with our Reseller platform, you will be able to rebrand Webmail as your own and resell everything under one roof: hosting, domains, templates, plugins, expert support…and now business emails!

Reseller price table example.
Resell professional business emails under your own brand!

If you need help with Reseller, check out our Reseller documentation.

Congratulations! Now you know how to set up, manage, and resell Webmail in your business as part of your digital services.

Email Protocols – Quick Primer

WPMU DEV offers the convenience of using both IMAP and POP3 email.

Not sure what IMAP is, how it works, or how IMAP differs from POP3? Then read below for a quick primer on these email protocols.

What is IMAP?

IMAP (Internet Message Access Protocol) is a standard protocol used to retrieve emails from a mail server. It allows users to access their emails from multiple devices like a phone, laptop, or tablet, because it stores emails on the server, rather than downloading them to a single device.

Since emails are managed and stored on the server, this reduces the need for extensive local storage and allows for easy backup and recovery.

Additional points about IMAP:

  • Users can organize emails into folders, flag them for priority, and save drafts on the server.
  • It supports multiple email clients syncing with the server, ensuring consistent message status across devices.
  • IMAP operates as an intermediary between the email server and client, enabling remote access from any device.
  • When users read emails via IMAP, they’re viewing them directly from the server without downloading them locally.
  • IMAP downloads messages only upon user request, enhancing efficiency compared to other protocols like POP3.
  • Messages persist on the server unless deleted by the user.
  • IMAP uses port 143, while IMAP over SSL/TLS uses port 993 for secure communication.

The advantages of using IMAP include the following:

  • Multi-Device Access: IMAP supports multiple logins, allowing users to connect to the email server from various devices simultaneously.
  • Flexibility: Unlike POP3, IMAP enables users to access their emails from different devices, making it ideal for users who travel frequently or need access from multiple locations.
  • Shared Mailbox: A single IMAP mailbox can be shared by multiple users, facilitating collaboration and communication within teams.
  • Organizational Tools: Users can organize emails on the server by creating folders and subfolders, enhancing their efficiency in managing email correspondence.
  • Email Functions Support: IMAP supports advanced email functions such as search and sort, improving user experience and productivity.
  • Offline Access: IMAP can be used offline, allowing users to access previously downloaded emails even without an internet connection.

There are some challenges to setting up and running your own IMAP service, which is why using a solution like WPMU DEV’s Webmail is highly recommended:

  • Hosting an IMAP service can be resource-intensive, requiring more server storage and bandwidth to manage multiple connections and the storage of emails.
  • IMAP requires implementing SSL encryption to ensure secure email communication.
  • Smaller businesses might find it challenging to allocate the necessary IT resources for managing an IMAP server efficiently.

IMAP vs POP3: What’s The Difference?

IMAP and POP3 are both client-server email retrieval protocols, but they are two different methods for accessing email messages from a server.

IMAP is designed for modern email users. It allows users to access your email from multiple devices because it keeps their emails on the server. When users read, delete, or organize their emails, these changes are synchronized across all devices.

For example, if you read an email on your phone, it will show as being read on your laptop as well.

POP3, on the other hand, is simpler and downloads emails from the server to a single device, then usually deletes them from the server. This means if users access their emails from a different device, they won’t see the emails that were downloaded to the first device.

For instance, if you download an email via POP3 on your computer, that email may not be accessible on your phone later.

Here are some of the key differences between IMAP and POP3:

Storage Approach

  • IMAP: Users can store emails on the server and access them from any device. It functions more like a remote file server.
  • POP3: Emails are saved in a single mailbox on the server and downloaded to the user’s device when accessed.

Access Flexibility

  • IMAP: Allows access from multiple devices, enabling users to view and manage emails consistently across various platforms.
  • POP3: Emails are typically downloaded to one device and removed from the server.

Handling of Emails

  • IMAP: Maintains emails on the server, allowing users to organize, flag, and manage them remotely.
  • POP3: Operates as a “store-and-forward” service, where emails are retrieved and then removed from the server.

In practice, IMAP is more suited for users who want to manage their emails from multiple devices or locations, offering greater flexibility and synchronization. POP could be considered for situations where email access is primarily from a single device, or there is a need to keep local copies of emails while removing them from the server to save space.

Essentially, IMAP prioritizes remote access and centralized email management on the server, while POP3 focuses on downloading and storing emails locally.

Professional Business Email For Your Clients

Integrating email hosting, particularly IMAP, with web hosting to create a seamless platform for managing client websites and emails under one roof is challenging, costly, and complex.

With WPMU DEV’s Webmail, you can enhance your email management capabilities and provide clients with affordable and professional business email no matter where their domain is hosted that is easy-to-use and does not require a third-party app.

Note: If you don’t require the full features of IMAP email for a site hosted with WPMU DEV, we also offer the option to create POP3 email accounts with our hosted email. These accounts can be linked to any email client of your choice, ensuring flexibility and convenience.

If you’re yet to set up a WPMU DEV account, we encourage you to become an Agency member. It’s 100% risk-free and includes everything you need to manage your clients and resell services like hosting, domains, emails, and more, all under your own brand.

If you’re already an Agency member, then head over to your Hub and click on Webmail to get started. If you need any help, our support team is available 24×7 (or ask our AI assistant) and you can also check out our extensive webmail documentation.

Posted on

Introducing Webmail: Easy, Secure, and Ad-Free Business Email for Your Clients 💌

We’re thrilled to unveil one of our most highly-requested features: Webmail, a professional business email service tailored for agencies and resellers that seamlessly integrates with WPMU DEV’s all-in-one WordPress management platform.

“IMAP is crucial to how we work”

Matthew, WPMU DEV Member

More and more members have been telling us that they need:

  • A solution that doesn’t solely depend on third-party email clients such as Gmail.
  • The ability to synchronize, administer, and access email across various devices using IMAP.
  • User-friendly business email for their clients with a quick and easy setup.
  • An alternative to managing their own email server and dealing with all the intricacies and expenses involved.

When our members speak, we listen!

We’re happy to announce that we have met these requirements and we’re excited to finally deliver Webmail, the IMAP-based email hosting solution our members have asked for … all easily managed from your Hub!

Now you can finally give your clients professional business email without relying on limited POP3 email, third-party platforms, or other complex and costly workarounds.

Standalone Email That Truly Stands Out

Being IMAP-based means our Webmail provides greater flexibility in email account creation.

Each email account boasts an impressive array of features:

  • 5GB of storage for every inbox.
  • Complimentary 10 email forwarding and 10 email aliases.
  • Robust spam and virus protection (including smart filtering, single sign-on, password protection, and 2FA).
  • Use of your own domain.
  • Modern & user-friendly email client with intuitive and feature-rich mailbox.
  • Fast and easy IMAP configuration with all popular mail clients and WordPress SMTP plugins.
  • Mobile-friendly, secure, ad-free webmail.
  • One-click webmail login.
  • Vacation autoresponder, professional signature, calendar integration, contact management, and more.
  • Support for maximum file attachment size of 27MB.
  • Unlimited mobile devices and IMAP connections.
  • Auto-sync across all devices.

And that’s just for starters!

Create & Manage Client Email Accounts From The Hub

With The Hub, you can easily set up and manage everything for multiple clients from once central location: their sites, hosting, domains, plugins…and email accounts!

Creating email accounts with Webmail is as easy as 1-2-3…

Click on Webmail in the Hub…

The Hub - Webmail
Manage all email accounts from one central location with The Hub.

Click the “+ Create New Email” button to create an email account from a domain managed in The Hub or hosted elsewhere…

Webmail screen with no email accounts set up yet!
Click the button to create a new email account.

Just follow the prompts and your email account will be all set up and ready to go in no time.

Webmail account setup
Your new email account is good to go!

Here you can also manage your webmail email forwarders…

Webmail email forwarders.
Easily add and delete email forwarders with Webmail.

And email aliases…

Webmail email aliases.
Create up to 10 email aliases per email account.

For a more detailed tutorial on creating and managing email accounts with Webmail, see our guide on how to use webmail.

Connect to Popular 3rd-Party Apps

Webmail can easily connect to 3rd-party apps (e.g. Apple Mail, Gmail, MS Outlook, Zoho, and many others) via IMAP configuration. Even if your clients aren’t tech-savvy, they should have no problem using their favorite email apps.

Webmail configurations
Easily connect your email accounts to third-party apps.

However, Webmail does not require any third-party app to work, and our own integrated email client includes all of the essential mailbox features your clients need to effortlessly and conveniently manage their email.

Give Clients More Control

With Webmail, everything your clients need to access and manage their emails is included right out of the box, and you can create professional business emails for them no matter where their domain is hosted.

Webmail lets you set up email accounts on any domain you own or manage, whether it’s a root domain like mydomain.com or a subdomain such as store.mydomain.com.

It also doesn’t matter if the domain is directly associated with a site in your Hub or not.

Webmail - create new email screen
Webmail lets you create email accounts from a domain managed in the Hub, or from a domain managed elsewhere.

Give Clients More Freedom

Unlike POP email, which doesn’t sync across devices, our IMAP Webmail lets your clients access their latest email activity no matter where they check it or which device they prefer to use…phones, laptops, tablets, even their smartwatch!

Additionally, Webmail includes a powerful user-friendly mailbox that clients can log into from anywhere, on any device, to read and send emails.

Webmail inbox.
Every Webmail account comes with a comprehensive and user-friendly inbox that can be accessed from any device…even directly from their web browser!

Webmail is Affordably-Priced

Each business email account (e.g. hey@yourcompany.tld), is considered an individual account and is available at an affordable price of just $1/month.

Each IMAP email account you create will be billed as a separate paid add-on, including 5GB of email storage.

Resell Webmail Under Your Own Brand

The Hub Client screen showing a white labeled client portal with Webmail highlighted.
Team members and clients access white label Webmail in your own branded client portal.

Webmail is already white labeled for reselling to your clients. Automated reseller for Webmail is coming next!

We’re currently working on bringing full auto-provisioning of emails to our Reseller platform. Until this feature is released, members can manually resell emails to clients and bill them using our Clients & Billing tool.

Full Reseller integration with Webmail means you will soon have access to all of Reseller’s features under one roof.

This includes:

  • White label hosting, domains, client billing, and more.
  • Auto-connect emails to client domains for easy reselling (coming soon!)
  • DNS management with quick and simple DNS verification for emails and domains.
  • 24/7 Expert support
  • Anytime priority email support for you and your clients.

Get Started With Webmail Today!

Interested in using Webmail for your web dev clients? It’s fully exclusive to our Agency plan.

If you’re already an Agency member, then head over to The Hub and check it out!

If you need any help with Webmail, our support team is available 24/7 (or ask our AI assistant) and see our guide on using webmail or refer to our extensive Webmail documentation.

If you haven’t set up a WPMU DEV account yet, we encourage you to become an Agency member. It’s 100% risk-free and includes everything you need to manage your clients and resell services like hosting, domains, emails, and more, all under your own brand.

Posted on

What’s New in WordPress 6.5 (Features and Screenshots)

WordPress 6.5 is here! This is the first big update of the year 2024 and a particularly exciting one.

It is packed with new features, loads of bug fixes, and improvements that will make your website management and content creation even better.

We will walk you through some of the major highlights of WordPress 6.5 with screenshots and details so that you can learn how to use these new features.

A look into the new WordPress 6.5 release with screenshots

Note: WordPress 6.5 is a major release. Unless you are on managed WordPress hosting, you will need to initiate the update manually. Follow our guide on how to safely update WordPress for detailed instructions.

Important: Don’t forget to create a complete WordPress backup before doing the update.

Now, let’s look at what you’ll find in WordPress 6.5 after the update. Here is a quick list of the major features we will explore:

Introducing the Font Library

The font library finally makes its official debut with the WordPress 6.5 release. It allows users to manage, install, and use fonts inside the WordPress editor.

The font library can be managed by launching the Site Editor (Appearance » Editor) and switching to the ‘Styles’ panel. After that, click on ‘Typography’, and you will see the fonts currently available with your WordPress theme.

Managing fonts library in WordPress 6.5

Next, you can click on the ‘Manage fonts’ button to open the library in a popup.

From here, you can upload fonts from your computer or switch to the ‘Install Fonts’ tab and connect to the Google Fonts library.

Connect Google fonts

Simply click on the ‘Allow access to Google Fonts’ button, and you will be able to browse fonts that are available for installation.

You can choose any font, and once you install it, it will be downloaded and served directly from your website (not from Google servers).

Browse and select Google Fonts

With the new font library feature, you don’t need to install a typography plugin just to use a custom font on your site.

Plugin Dependencies

Have you ever installed a WordPress plugin, struggled with it for a while, and found out it needs another plugin to work?

WordPress 6.5 fixes that issue for the end users and plugin developers.

Developers can now add a ‘Requires Plugins’ entry into the plugin header and mention the additional plugins required to be installed and activated for their plugin to work.

Now, when users install a plugin that depends on other plugins, they will see an error when they try to activate it (post-installation).

Required plugin error

On the Plugins page, users can also see which plugins are required.

Those plugins will then need to be installed and activated by the user.

Required plugins to install

Once all the required plugins are activated, the user can activate the main plugin that needs them.

Currently, this feature can only install plugins hosted on WordPress.org. This means third-party or premium plugins hosted elsewhere cannot use this feature to manage dependencies.

Block Editor Improvements

The block editor is the default WordPress editor. This is where you create your content and edit your pages.

Each WordPress release has many improvements, and new features have been added to the editor.

Obviously, 6.5 is no different, and you may want to take note of some of those features, as they can save you a lot of time.

Connect Blocks to Custom Fields

Custom fields in WordPress allow you to add custom metadata to WordPress posts and pages. For more details, you can see our glossary entry on custom fields.

They have been around for a long time, and developers and advanced WordPress users use them in many different ways.

WordPress 6.5 introduces a new Block Binding API, which allows users to use custom fields and other dynamic data as attributes for individual blocks.

This will also allow developers to display dynamic data inside the standard core blocks programmatically. Here is a detailed overview of Block Binding API on Make WordPress Core.

For those of you who are adventurous, here is a quick way to try it out.

Simply edit a WordPress post and add these two custom fields:

  • mood
  • weather

You can see below what this should look like.

Adding custom fields

After that, in the block editor settings, switch to the code editor view.

You can do this by clicking on the three-dot menu in the top right corner of the screen and selecting ‘Code Editor’.

Opening the WordPress code editor

Next, in the content area, you need to add the following code to a text field, such as a Paragraph block: 

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"mood"}}}}} -->
<p></p>
<!-- /wp:paragraph -->
 
<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"weather"}}}}} -->
<p></p>
<!-- /wp:paragraph -->
Hosted with ❤️ by WPCode
1-click Use in WordPress

You can now save your changes and preview your post and page.

From here, you will be able to see the meta key values displayed in your block code.

Preview

Smart Overlay for the Cover Block

The Cover block includes a cool enhancement in WordPress 6.5. It will now automatically choose an overlay cover based on the image or the color you use for the block.

Then, you can easily adjust the overlay opacity to match your design.

Cover block smart color overlay

Drop Shadow Effect

The drop shadow effect allows you to give the illusion of depth and make certain elements in your layout look prominent.

WordPress 6.5 adds the drop shadow effect to the Image, Column(s), and Buttons blocks. Plus, you can choose from a few different drop shadow styles to better match your design.

Drop shadow effect

Block Settings in List View

The list view in the block editor gives you a bird’s eye view of your content layout. It is particularly handy for lengthy articles, landing pages, and complex page layouts.

Previously, you had to click on the three-dot menu next to an item to see its settings in the list view. In WordPress 6.5, you can now just right-click to access block settings.

Right click to see block settings in list view

Rename Blocks in List View

WordPress 6.5 also allows you to rename any block in the list view. This helps you better organize and understand the layout of your content.

Rename any block

Link control (the insert link popup) has significant changes in WordPress 6.5 to make it more user-friendly.

First, it will highlight your blog and front pages with different icons.

Link control icons

Secondly, once you have added a link, clicking on it will show you a better context menu.

From here, you can see where the link goes, edit the link, unlink, or copy it with a click.

Link actions

Go ahead and click on the edit link button and then click to expand the Advanced menu.

Now, finally, you can choose to make a link nofollow in WordPress out of the box.

Make links nofollow in WordPress 6.5

However, you will notice that opening a link in a new window or making it nofollow requires multiple clicks.

To make this easier, we recommend using All in One SEO for WordPress. It shows all the options in the custom link control panel right away.

Link control in All in One SEO

Refreshed Preferences Panel

WordPress 6.5 ships with a refreshed Preferences panel in the block editor.

Just click on the three-dot menu in the top-right corner of the screen and then select ‘Preferences’.

The panel now includes Appearance and Accessibility sections, along with improved categorization of previous sections.

Preferences panel refreshed

Site Editor Changes

The Full Site Editor is where users can make changes to their site, much like the former theme customizer.

Context: The Site Editor is only available in block themes with full site editor support. Older themes that don’t support the site editor are now called classic themes.

WordPress 6.5 comes with several improvements to the Site Editor. Let’s check out some of the more significant changes.

New Data Views

WordPress 6.5 includes a better way to view your pages, block patterns, and templates in the Site Editor.

You can view items in Grid view with large previews and sort them in different orders.

Data set views

You can also see items in the table view.

For instance, you see your page list and start editing without leaving the Site Editor interface.

Page list views

Improved Style Revisions

Style revisions were introduced in WordPress 6.3, allowing users to track and undo style changes to their site easily, just like post revisions.

However, style revisions only showed a timeline, and you had to browse it to see what changes were applied.

WordPress 6.5 brings better style revisions, which show you a description of changes made for each revision.

Style revision descriptions

The browsing between different revisions has also become smoother. You can easily switch to a revision by clicking on the ‘Apply’ button.

Plus, you will also see the changes that were made but have not been saved yet.

Unsaved changes or apply a previous version

New Interactivity API

WordPress 6.5 comes with the Interactivity API, which provides a framework for developers to create modern front-end interfaces that don’t require complete page reloads.

Think of reading comments on your favorite blog, and a new comment just pops up as you are writing your own reply. Or imagine a live search feature that doesn’t slow down your website.

The team behind the project has made a demo website to showcase the capabilities of the Interactivity API.

Interactivity API demo

Hopefully, you will see some WordPress plugins utilizing the API to create some cool things in the coming days.

Under the Hood Changes in WordPress 6.5

This release also comes with a ton of behind-the-scenes changes to improve performance, fix bugs, and give developers more options.

Here are some of those changes.

  • Performance improvements: The Block and Site Editors will load two times faster, and the input time will be four times faster than WordPress 6.4. (Details)
  • An improved library is introduced to load translations much faster. (Details)
  • Classic themes can now add support for appearance tools. (Details)
  • The Block API now recognizes the viewScriptModule field in block.json metadata. (Details)
  • WordPress 6.5 updates Block Hooks to make them more widely useful and includes some frequently requested new features. (Details)
  • Major updates to the HTML API, including the Tag Processor, which can now scan every token in an HTML document. It now supports more of the HTML specification than WordPress 6.4. (Details )

We hope this article helped you explore new features in WordPress 6.5. While you are exploring different areas of your WordPress website, you may also want to optimize your website speed and performance or review essential WordPress security settings to keep your site secure.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post What’s New in WordPress 6.5 (Features and Screenshots) first appeared on WPBeginner.

Posted on

How to Start an Online Thrift Store Using WordPress (2024)

Are you looking to create an online thrift store website?

Many people think that to start an eCommerce business, they’ll need to create a new product. However, there’s another way. You can find pre-owned items and sell them online through a thrift store.

In this article, we will show you how to start an online thrift store using WordPress.

How to Start an online thrift store using WordPress

What is an Online Thrift Store?

A thrift store is a type of eCommerce business where you can sell used or pre-loved products. It can be anything ranging from clothes to automobiles, electronic items, toys, books, furniture, and more at bargain prices.

One of the benefits of starting an online thrift store is its low startup cost. You don’t need a lot of money to buy and maintain an inventory. Plus, the cost of building an eCommerce site is also low.

For example, if you have an expensive dress that doesn’t fit you anymore. Instead of throwing it away, you can have it cleaned and sell it online.

Besides that, it is a great side hustle to make money online. You can start small and slowly expand your business.

What Do You Need to Start an Online Thrift Store?

When it comes to starting an online store, many people think it is too complicated. However, it’s a lot simpler than you might think.

There are 3 main things you’ll need to get started:

  • Domain Name – This is the name of your thrift store that people will enter in their web browser (like wpbeginner.com). Think of it as an address to your home.
  • Web Hosting Service – It’s where your website lives on the internet and where all your website files are saved. You can think of it as a house for your online thrift store.
  • SSL Certificate – This adds an extra layer of security to your online store, so you can easily accept online payments from customers.

It’s really that easy!

You can build an online thrift website without any technical skills, coding, or complicated setup.

We’ll show you step-by-step how to get started. Simply click the links below to jump to any section:

Choosing an eCommerce Platform for Online Thrift Store

The first and most essential step is to find the right platform for your online thrift store.

Choosing the wrong eCommerce platform can be a costly mistake for new store owners. Moving to a new service later on would mean you’ll have to re-do all the work and spend money again.

To avoid making this mistake, we’re here to help.

There are two popular eCommerce platforms that we recommend for your online thrift store: Shopify or WooCommerce (built on WordPress).

Shopify is a fully hosted eCommerce solution that lets you create an online store quickly.

However, the biggest drawback is its pricing. You’ll need to pay $25 per month, which can be quite expensive for individuals and small business owners. You also get limited payment options unless you pay extra.

This is why most users choose WordPress + WooCommerce. It is more flexible and cost-effective compared to Shopify. WooCommerce does require some setup, but it’s worth it in the long run.

To learn more details, please see our comparison of Shopify vs WooCommerce.

For this tutorial, we will walk you through how to start an online thrift store using WooCommerce + WordPress.

Select a Web Hosting Service and Install WordPress

As we mentioned earlier, you will need a domain name, web hosting service, and SSL certificate to create an online thrift store.

If purchased separately, a domain name costs around $14.99 per year, web hosting will cost around $7.99 per year, and an SSL certificate will cost roughly $69.99 per year.

This cost can go even higher if you add extra features and addons to your hosting plan.

Thankfully, our friends at Bluehost offer an exclusive offer for WPBeginner readers. You can save up to 61% on website hosting plans and get started for as little as $1.99 per month.

Bluehost is an official WordPress and WooCommerce-recommended hosting provider. The best part, you get a free domain name and SSL certificate with each hosting plan.

→ Click Here to Claim This Exclusive Bluehost Offer ←

Note: At WPBeginner, we believe in transparency. If you sign up with Bluehost using our referral link, then we will earn a small commission at no extra cost to you (in fact, you will save money and get a free domain).

We would get this commission for recommending just about any WordPress hosting company, but we only recommend products that we personally use and believe will add value to our readers.

If you’re looking for an alternative to Bluehost, then we suggest using SiteGround WooCommerce hosting. It is another officially recommended WordPress hosting service.

To start, simply visit the Bluehost website and click the ‘Get Started Now’ button.

Clicking the Get Started Now button in the Bluehost page

Next, you’ll need to select a pricing plan.

You can get started for $1.99 per month. However, Bluehost also offers an Online Store plan costing you $6.99 per month. It comes with an exclusive store theme, store analytics, and $450 worth of eCommerce plugins included in the plan.

We’ll select the ‘Online Store’ plan for this tutorial.

Bluehost pricing plans

Next, Bluehost will ask you to enter a name for your online thrift store.

If you don’t have a domain, then simply enter a website name under the ‘Create a new domain’ section, select a domain extension, and click the ‘Next’ button.

Bluehost buy domain name

Make sure that the domain name relates to your business, is easy to pronounce and spell, and is memorable. You should also try to get a domain with a ‘.com’ extension.

If you’re not sure which name to choose, then please see our guide on how to choose the best domain name.

After that, you’ll need to provide details like name, address, email, and more to create a new account.

Bluehost will also show extra features to add to your hosting plan. We don’t recommend purchasing these additional features, as you can always add them later on.

Bluehost WooCommerce package extras

Lastly, you’ll need to enter the payment information to complete the purchase.

Once that’s done, Bluehost will open the account dashboard from where you can manage your websites.

The best part is that Bluehost offers a one-click WordPress installation. However, if you are using another hosting provider or somehow skipped the setup step, then please see our guide on how to install WordPress for more details.

For instance, in Bluehost, you can log in to your account and navigate to the ‘Websites’ tab. From here, simply click the ‘Add Site’ button in the top corner.

Click the Add Site button on the Bluehost dashboard

This will launch the WordPress setup wizard in Bluehost.

You can click the ‘Install WordPress’ option and click the ‘Continue’ button.

Install WordPress in Bluehost

After that, you’ll be asked to enter a name for your online thrift store website.

Once you’ve entered a title, click the ‘Continue’ button.

Connect your domain or enter a website title

Bluehost will now install WordPress and create your thrift store site.

After the installation is complete, you can go to the ‘Websites’ tab to see your new website. Go ahead and click the ‘Edit Site’ button to view the WordPress admin panel.

Click the Edit Site button to access your WordPress dashboard

As an alternate, you can also log in to your WordPress dashboard by going to ‘yourthriftstore.com/wp-admin’ directly from the browser.

Here’s what the WordPress admin area will look like:

Areas of the WordPress Dashboard

Next, you’ll need to view WordPress settings and ensure everything is set up properly.

First, you need to go to the Settings » General page and add a WordPress site title and tagline. If you’re happy with the site title, then you don’t need to change it.

A tagline acts as a small description for your thrift store. However, this is optional, and you can add it later on.

Change site title

Besides that, you’ll also need to ensure that your WordPress Address (URL) and Site Address (URL) are using HTTPS instead of HTTP.

Next, you can go to the Settings » Discussions page from the admin panel and scroll down to the ‘Before a comment appears’ section.

Here, click the ‘Comment must be manually approved’ checkbox. This way, your comments will go into moderation and help prevent spam.

Require all comments to be manually approved

For more details, please see our guide on how to moderate comments in WordPress.

Setting Up WooCommerce on Your Site

The next step is to install WooCommerce on your website. It is the best eCommerce platform that’s built on top of WordPress.

First, you’ll need to install and activate the WooCommerce plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, the WooCommerce setup wizard will launch. You can click the ‘Set up my store’ button to continue.

WooCommerce setup wizard

Simply follow the onscreen instructions to complete the WooCommerce setup. If you need help, then please see our guide on how to start an online store.

Once the setup is complete, you can set up payment options on your thrift store.

WooCommerce supports some of the most popular payment gateways. You can accept credit cards, cash on delivery, bank transfers, Stripe, PayPal, and more.

Simply go to WooCommerce » Settings from your WordPress dashboard and switch to the ‘Payments’ tab.

Set Up Stripe Credit Card in WooCommerce

You can click the ‘Set up’ button for the payment service you’d like to add to your online thrift store.

For example, let’s say you want to configure Stripe credit card payments. Simply connect your Stripe account or enter account keys to add the payment method to your store.

Connect Stripe to WooCommerce

Another optional setting you can configure in WooCommerce is shipping zones. It lets you add different shipping methods and costs for various regions.

For more details, please see our guide on how to add a shipping calculator to your WordPress site.

Customize the WordPress Thrift Store Theme

When you sign up for the Bluehost Online Store plan, you get a WordPress theme pre-installed.

Simply head to Appearance » Themes and click the ‘Customize’ button to edit the theme.

Customize default WooCommerce store theme

This will launch the WordPress Full Site Editor (FSE). It was first introduced in WordPress 5.9 and uses blocks to edit the theme, just like editing content in the block editor.

The goal of the full site editor is to simplify website editing and make it user-friendly.

Edit theme in full site editor

To learn more, you can see our complete guide to WordPress full site editing.

If you don’t like the default theme, then you can simply change it. There are thousands of WordPress themes to choose from. You can see our list of the best WooCommerce WordPress themes to pick the on you like.

On the other hand, you can create a custom theme for your online thrift store using a WordPress theme builder.

For instance, SeedProd is the best theme and landing page builder that offers a drag-and-drop interface. It comes with pre-built templates, which you can easily customize without editing code.

Customizing a WooCommerce product page using SeedProd

You can follow our guide on how to create a custom WordPress theme (no code).

Adding Products to Your Online Thrift Store

Now that your online thrift store is ready and set up, it’s time to add products to WooCommerce.

Simply navigate to the Products » Add New page from the admin panel. Next, you can enter a name for your product and add a brief description.

Add new product

After that, you’ll need to scroll down to the ‘Product Data’ section.

Here, you can enter the price of your product under the ‘Regular price ($)’ field. There is also an option to enter a sale price for the product.

Enter price of product

Next, you can add product images from the panel on the right.

Simply navigate to the Product Image section and add your picture. This will act as the featured image for your product.

add product images woocommerce

There is also an option to create a product gallery and upload other images for a product.

Once you’re done, simply click the ‘Publish’ button.

publish woocommerce product

Now, you can repeat this step and add more products to your online thrift store.

You can then visit your site to see all the products listed on the store page.

Online thrift store preview

Sourcing Products for Your Thrift Store

Finding products on a regular basis for your online thrift store can be a challenge for many business owners.

However, there are different places from where you can source used or pre-loved products. For instance, a quick search on other thrift stores and sites like eBay and Craigslist can help discover multiple products that you can list on your site.

Similarly, visiting flea markets, other local stores, and garage sales can also help you find the right products for your store. This is a great option if you’re selling clothes, books, and second-hand electronic items.

Another option is to allow users to upload their items for consideration on your online thrift store. This way, you’ll get to build an inventory without having to invest and simply share the revenue from the sale.

You can also create an online marketplace using WordPress where users can sell their products using your eCommerce platform. For example, people can sell their used items on your site and give you a percentage or a fee for using your site.

Add Plugins to Grow Your Traffic and Drive Sales

WordPress offers different plugins that act like apps for your website. They allow you to add extra features and functionalities and help customize your online thrift store.

For example, there are plugins for adding a contact form, product image galleries, product comparisons, gift cards, giveaways, popups, and more.

You can choose from over 59,000 free WordPress plugins. There are also premium plugins that are sold by third-party sites and developers.

If you’re not sure what to look for in a plugin before installing it, then you may want to see our guide on how to choose the best WordPress plugin.

That said, we’ve handpicked some essential plugins that you should install on your thrift store.

Add Extra Features and Functionality

  • WPForms – It is the best form plugin for WordPress that lets you add a contact form to your site. You can also create other types of forms, like a file upload form, order/billing form, online payment form, and more.
  • MonsterInsights – You can connect Google Analytics to your site using MonsterInsights without editing code. Using the plugin, you get insights about how users behave in your store, where they click, which products they purchase, and where they are from.
  • SeedProd – It’s the best drag-and-drop builder for creating custom landing pages, layouts, and website themes without any technical knowledge.
  • Envira Gallery – Create stunning image galleries for products on your online thrift store.

Website Optimization for SEO, Performance, and Conversions

Enhance Your Website Security

Other WordPress Plugins to Consider

  • RafflePress – Run viral giveaways and contests on your thrift store to boost sales, social media followers, and email subscribers.
  • UserFeedback – Add interactive surveys to your online store and collect user feedback. Use the data to improve user experience and satisfy customer needs.
  • Smash Balloon – Display social media content on your store and boost engagement.
  • Uncanny Automator – Automate workflows to save time and streamline work. Connect plugins, sites, and apps to automate your thrift store.
  • Constant Contact – It is the best email marketing service that you can use for all your email needs. Easily set up email campaigns, autoresponders, A/B testing, WooCommerce integration, and more.
  • WP Mail SMTP – Ensure your WordPress emails reach your customer’s inbox and don’t end up in spam. Fix email deliverability issues.
  • LiveChat – Offer real-time support to customers through live chat software. Answer customer queries, improve user experience, and boost sales.

You can also take a look at our list of the best WooCommerce plugins to find more options.

At WPBeginner, our main goal is to provide helpful and beginner-friendly WordPress tutorials for non-techy users, small business owners, bloggers, and eCommerce store owners.

To help you learn more about WooCommerce and WordPress, you can follow these guides:

We hope this article helped you learn how to start an online thrift store using WordPress. You may also want to see our guide on important reasons why you should use WordPress and the best business phone services for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Start an Online Thrift Store Using WordPress (2024) first appeared on WPBeginner.

Posted on

Wallpaper is Making a Comeback

Gone are the days when wallpaper was seen as a relic of interior design. In a stunning turn of events, wallpaper is making a formidable comeback, reasserting itself as a key player in the world of modern décor. Let’s dive into the world of wallpaper to uncover why it’s reclaiming its place on our walls […]
Posted on

Infinite-Scrolling Logos In Flat HTML And Pure CSS

When I was asked to make an auto-scrolling logo farm, I had to ask myself: “You mean, like a <marquee>?” It’s not the weirdest request, but the thought of a <marquee> conjures up the “old” web days when Geocities ruled. What was next, a repeating sparkling unicorn GIF background?

If you’re tempted to reach for the <marquee> element, don’t. MDN has a stern warning about it right at the top of the page:

“Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible […] Be aware that this feature may cease to work at any time.”

That’s fine because whatever infinite scrolling feature <marquee> is offered, we can most certainly pull off in CSS. But when I researched examples to help guide me, I was surprised to find very little on it. Maybe auto-scrolling elements aren’t the rage these days. Perhaps the sheer nature of auto-scrolling behavior is enough of an accessibility red flag to scare us off.

Whatever the case, we have the tools to do this, and I wanted to share how I went about it. This is one of those things that can be done in lots of different ways, leveraging lots of different CSS features. Even though I am not going to exhaustively explore all of them, I think it’s neat to see someone else’s thought process, and that’s what you’re going to get from me in this article.

What We’re Making

But first, here's an example of the finished result:

See the Pen CSS only marquee without HTML duplication [forked] by Silvestar Bistrović.

The idea is fairly straightforward. We want some sort of container, and in it, we want a series of images that infinitely scroll without end. In other words, as the last image slides in, we want the first image in the series to directly follow it in an infinite loop.

So, here’s the plan: We’ll set up the HTML first, then pick at the container and make sure the images are correctly positioned in it before we move on to writing the CSS animation that pulls it all together.

Existing Examples

Like I mentioned, I tried searching for some ideas. While I didn’t find exactly what I was looking for, I did find a few demos that provided a spark of inspiration. What I really wanted was to use CSS only while not having to “clone” the marquee items.

Geoff Graham’s “Sliding Background Effect” is close to what I wanted. While it is dated, it did help me see how I could intentionally use overflow to allow images to “slide” out of the container and an animation that loops forever. It’s a background image, though, and relies on super-specific numeric values that make it tough to repurpose in other projects.

See the Pen Untitled [forked] by @css-tricks.

There’s another great example from Coding Journey over at CodePen:

See the Pen Marquee-like Content Scrolling [forked] by Coding Journey.

The effect is what I’m after for sure, but it uses some JavaScript, and even though it’s just a light sprinkle, I would prefer to leave JavaScript out of the mix.

Ryan Mulligan’s “CSS Marquee Logo Wall” is the closest thing. Not only is it a logo farm with individual images, but it demonstrates how CSS masking can be used to hide the images as they slide in and out of the container. I was able to integrate that same idea into my work.

See the Pen CSS Marquee Logo Wall [forked] by Ryan Mulligan.

But there’s still something else I’m after. What I would like is the smallest amount of HTML possible, namely markup that does not need to be duplicated to create the impression that there’s an unending number of images. In other words, we should be able to create an infinite-scrolling series of images where the images are the only child elements in the “marquee” container.

I did find a few more examples in other places, but these were enough to point me in the right direction. Follow along with me.

The HTML

Let's set up the HTML structure first before anything else. Again, I want this to be as “simple” as possible, meaning very few elements with the shortest family tree possible. We can get by with nothing but the “marquee” container and the logo images in it.

<figure class="marquee">
  <img class="marquee__item" src="logo-1.png" width="100" height="100" alt="Company 1">
  <img class="marquee__item" src="logo-2.png" width="100" height="100" alt="Company 2">
  <img class="marquee__item" src="logo-3.png" width="100" height="100" alt="Company 3">
</figure>

This keeps things as “flat” as possible. There shouldn’t be anything else we need in here to make things work.

Setting Up The Container

Flexbox might be the simplest approach for establishing a row of images with a gap between them. We don’t even need to tell it to flow in a row direction because that’s the default.

.marquee {
  display: flex;
}

I already know that I plan on using absolute positioning on the image elements, so it makes sense to set relative positioning on the container to, you know, contain them. And since the images are in an absolute position, they have no reserved height or width dimensions that influence the size of the container. So, we’ll have to declare an explicit block-size (the logical equivalent to height). We also need a maximum width so we have a boundary for the images to slide in and out of view, so we’ll use max-inline-size (the logical equivalent to max-width):

.marquee {
  --marquee-max-width: 90vw;

  display: flex;
  block-size: var(--marquee-item-height);
  max-inline-size: var(--marquee-max-width);
  position: relative;
}

Notice I’m using a couple of CSS variables in there: one that defines the marquee’s height based on the height of one of the images (--marquee-item-height) and one that defines the marquee’s maximum width (--marquee-max-width). We can give the marquee’s maximum width a value now, but we’ll need to formally register and assign a value to the image height, which we will do in a bit. I just like knowing what variables I am planning to work with as I go.

Next up, we want the images to be hidden when they are outside of the container. We’ll set the horizontal overflow accordingly:

.marquee {
  --marquee-max-width: 90vw;

  display: flex;
  block-size: var(--marquee-item-height);
  max-inline-size: var(--marquee-max-width);
  overflow-x: hidden;
  position: relative;
}

And I really like the way Ryan Mulligan used a CSS mask. It creates the impression that images are fading in and out of view. So, let’s add that to the mix:

.marquee {
  display: flex;
  block-size: var(--marquee-item-height);
  max-inline-size: var(--marquee-max-width);
  overflow-x: hidden;
  position: relative;
  mask-image: linear-gradient(
    to right,
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 20%,
    hsl(0 0% 0% / 1) 80%,
    hsl(0 0% 0% / 0)
  );
  position: relative;
}

Here’s what we have so far:

See the Pen CSS only marquee without HTML duplication, example 0 [forked] by Silvestar Bistrović.

Positioning The Marquee Items

Absolute positioning is what allows us to yank the images out of the document flow and manually position them so we can start there.

.marquee__item {
  position: absolute;
}

That makes it look like the images are completely gone. But they’re there — the images are stacked directly on top of one another.

Remember that CSS variable for our container, --marquee-item-height? Now, we can use it to match the marquee item height:

.marquee__item {
  position: absolute;
  inset-inline-start: var(--marquee-item-offset);
}

To push marquee images outside the container, we need to define a --marquee-item-offset, but that calculation is not trivial, so we will learn how to do it in the next section. We know what the animation needs to be: something that moves linearly for a certain duration after an initial delay, then goes on infinitely. Let’s plug that in with some variables as temporary placeholders.

.marquee__item {
  position: absolute;
  inset-inline-start: var(--marquee-item-offset);
  animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
}

To animate the marquee items infinitely, we have to define two CSS variables, one for the duration (--marquee-duration) and one for the delay (--marquee-delay). The duration can be any length you want, but the delay should be calculated, which is what we will figure out in the next section.

.marquee__item {
  position: absolute;
  inset-inline-start: var(--marquee-item-offset);
  animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
  transform: translateX(-50%);
}

Finally, we will translate the marquee item by -50% horizontally. This small “hack” handles situations when the image sizes are uneven.

See the Pen CSS only marquee without HTML duplication, example 2 [forked] by Silvestar Bistrović.

Animating The Images

To make the animation work, we need the following information:

  • Width of the logos,
  • Height of the logos,
  • Number of items, and
  • Duration of the animation.

Let’s use the following configurations for our set of variables:

.marquee--8 {
  --marquee-item-width: 100px;
  --marquee-item-height: 100px;
  --marquee-duration: 36s;
  --marquee-items: 8;
}

Note: I’m using the BEM modifier .marquee--8 to define the animation of the eight logos. We can define the animation keyframes now that we know the --marquee-item-width value.

@keyframes go {
  to {
    inset-inline-start: calc(var(--marquee-item-width) * -1);
  }
}

The animation moves the marquee item from right to left, allowing each one to enter into view from the right as it travels out of view over on the left edge and outside of the marquee container.

Now, we need to define the --marquee-item-offset. We want to push the marquee item all the way to the right side of the marquee container, opposite of the animation end state.

You might think the offset should be 100% + var(--marquee-item-width), but that would make the logos overlap on smaller screens. To prevent that, we need to know the minimum width of all logos combined. We do that in the following way:

calc(var(--marquee-item-width) * var(--marquee-items))

But that is not enough. If the marquee container is too big, the logos would take less than the maximum space, and the offset would be within the container, which makes the logos visible inside the marquee container. To prevent that, we will use the max() function like the following:

--marquee-item-offset: max(
  calc(var(--marquee-item-width) * var(--marquee-items)),
  calc(100% + var(--marquee-item-width))
);

The max() function checks which of the two values in its arguments is bigger, the overall width of all logos or the maximum width of the container plus the single logo width, which we defined earlier. The latter will be true on bigger screens and the former on smaller screens.

See the Pen CSS only marquee without HTML duplication, example 3 [forked] by Silvestar Bistrović.

Finally, we will define the complicated animation delay (--marquee-delay) with this formula:

--marquee-delay: calc(var(--marquee-duration) / var(--marquee-items) * (var(--marquee-items) - var(--marquee-item-index)) * -1);

The delay equals the animation duration divided by a quadratic polynomial (that’s what ChatGPT tells me, at least). The quadratic polynomial is the following part, where we multiply the number of items and number of items minus the current item index:

var(--marquee-items) * (var(--marquee-items) - var(--marquee-item-index))

Note that we are using a negative delay (* -1) to make the animation start in the “past,” so to speak. The only remaining variable to define is the --marquee-item-index (the current marquee item position):

.marquee--8 .marquee__item:nth-of-type(1) {
  --marquee-item-index: 1;
}
.marquee--8 .marquee__item:nth-of-type(2) {
  --marquee-item-index: 2;
}

/* etc. */

.marquee--8 .marquee__item:nth-of-type(8) {
  --marquee-item-index: 8;
}

Here’s that final demo once again:

See the Pen CSS only marquee without HTML duplication [forked] by Silvestar Bistrović.

Improvements

This solution could be better, especially when the logos are not equal widths. To adjust the gaps between inconsistently sized images, we could calculate the delay of the animation more precisely. That is possible because the animation is linear. I’ve tried to find a formula, but I think it needs more fine-tuning, as you can see:

See the Pen CSS only marquee without HTML duplication, example 4 [forked] by Silvestar Bistrović.

Another improvement we can get with a bit of fine-tuning is to prevent big gaps on wide screens. To do that, set the max-inline-size and declare margin-inline: auto on the .marquee container:

See the Pen CSS only marquee without HTML duplication, example 5 [forked] by Silvestar Bistrović.

Conclusion

What do you think? Is this something you can see yourself using on a project? Would you approach it differently? I am always happy when I land on something with a clean HTML structure and a pure CSS solution. You can see the final implementation on the Heyflow website.

Further Reading On SmashingMag

Posted on

Read file properties of video files in C++

I want to figure out what Windows does when you right-click a video file and check properties and I would like to write a similar piece of code in C++.
I should be able to figure out how to read the file type and size, but I'm lost in how to get details of the video like resolution and runtime.
Which API commands does Windows use there?