> ## Documentation Index
> Fetch the complete documentation index at: https://memberful.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# How to create a paywall with a clear call to action

> Set up a paywall on your WordPress site that clearly guides visitors to subscribe or sign in. Customize the message and call to action to convert more members.

export const RelatedDocs = ({link1, link2, link3, link4, link5, link6, link7, link8, link9, link10, className = ""}) => {
  const links = [link1, link2, link3, link4, link5, link6, link7, link8, link9, link10].filter(Boolean);
  if (!links.length) return null;
  return <section className={`related-docs border dark:border-gray-700 rounded-2xl px-6 py-4 mt-6 ${className}`}>
      <p className="mb-2 font-medium">
        <strong>Related help docs:</strong>
      </p>
      <ul className="space-y-1 mb-1 mt-1">
        {links.map((link, index) => <li key={index}>
            <a href={link.url}>{link.label}</a>
          </li>)}
      </ul>
    </section>;
};

In this help article, we provide a paywall template that you can customize and add to your WordPress site. Compatibility with various WordPress themes, page builders, or plugins may vary, so it's essential to test it thoroughly on your site.

<Frame>
  <img src="https://mintcdn.com/memberful/M_FwlsoTYDRYJ4EU/images/wordpress-plugin/protect-content/create-a-paywall-with-a-clear-call-to-action/marketing-content.png?fit=max&auto=format&n=M_FwlsoTYDRYJ4EU&q=85&s=cfc3adae316b9553bda3f1efebdf9209" alt="Marketing content" width="1440" height="1074" data-path="images/wordpress-plugin/protect-content/create-a-paywall-with-a-clear-call-to-action/marketing-content.png" />
</Frame>

When you protect content like videos and articles with the Memberful WordPress plugin, you have the opportunity to [show marketing content or teaser text](/wordpress-plugin/protect-content/restrict-access-to-a-single-post/#review-your-options-for-adding-marketing-content) to site visitors. The goal of the text should be to prompt visitors to sign up for your membership.

In this article, we provide a paywall call to action template that you can customize and add to your WordPress site.

<Callout icon="triangle-alert" color="#FFE044">
  <p>Compatibility with various WordPress themes, page builders, or plugins may vary, so it's essential to test it thoroughly on your site.</p>
</Callout>

## Add HTML to the Global marketing content meta box

<Frame>
  <img src="https://mintcdn.com/memberful/M_FwlsoTYDRYJ4EU/images/wordpress-plugin/protect-content/create-a-paywall-with-a-clear-call-to-action/marketing-content-html.png?fit=max&auto=format&n=M_FwlsoTYDRYJ4EU&q=85&s=8c646c1556af0143e49795e329ac043a" alt="HTML" width="1440" height="1822" data-path="images/wordpress-plugin/protect-content/create-a-paywall-with-a-clear-call-to-action/marketing-content-html.png" />
</Frame>

The following HTML code describes the elements that make up your paywall. It will prompt visitors to sign up for your membership and members to sign in.

1. Go to *Settings → Memberful → Global marketing content* in your WordPress dashboard.
2. Add the HTML (below) to the **Text** tab of the marketing content meta box.
3. Replace `WWW.YOURSITE.COM/subscribe` with your membership sales page and `WWW.YOURSITE.COM` with your actual website URL.
4. Click **Save changes.**

```html theme={null}
<div class="paywall-container">

    <h1>To continue reading...</h1>
    <p>Subscribe and get unlimited access to articles and more:</p>

    <a href="https://WWW.YOURSITE.COM/subscribe" class="paywall-button">Subscribe</a>

    <div class="separator"></div>

    <p>Already a subscriber? <a class="subscriber-link" href="https://WWW.YOURSITE.COM/?memberful_endpoint=auth">Log in here.</a></p>

</div>
```

## Add CSS to your site

<Frame>
  <img src="https://mintcdn.com/memberful/4eo498UnQhX-7VGZ/images/wordpress-plugin/protect-content/create-a-paywall-with-a-clear-call-to-action/marketing-content-css.png?fit=max&auto=format&n=4eo498UnQhX-7VGZ&q=85&s=92345656c6c003fb0c186ed56f4d18ff" alt="CSS" width="1440" height="961" data-path="images/wordpress-plugin/protect-content/create-a-paywall-with-a-clear-call-to-action/marketing-content-css.png" />
</Frame>

Now we'll add CSS code which describes how your paywall should look. Where you add CSS is different for every site builder.

1. See this article for help with [adding custom CSS to your WordPress site](https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/).
2. Add the CSS (below) to your WordPress site.
3. Edit the hex codes (i.e. colors) to fit with your site design. See [this resource](https://htmlcolorcodes.com/) if you need help finding hex codes that match your brand.

```css theme={null}
.paywall-container {
    max-width: 800px;
    margin: 100px auto;
    padding: 20px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #E1E1E1;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
.paywall-container h1 {
    font-size: 24px;
    font-weight: bold;
    color: #000000;
}
.paywall-container p {
    font-size: 18px;
    color: #000000;
    margin: 20px 0;
}
.paywall-button {
    display: inline-block;
    width: 125px;
    height: 50px;
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    background-color: #F2BD13;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px auto;
}
.paywall-button:hover {
    background-color: #000000;
}
.separator {
    margin: 30px 0;
    border-top: 1px solid #E1E1E1;
}
.subscriber-link {
    font-size: 16px;
    color: #000000;
    text-decoration: underline;
    margin: 0;
}
.subscriber-link:hover {
    text-decoration: underline;
    color: #000000;
}         
```

<RelatedDocs
  link1={{
url: "/wordpress-plugin/protect-content/restrict-access-to-a-single-post/",
label: "Restrict access to individual posts.",
}}
  link2={{
url: "/wordpress-plugin/protect-content/bulk-restrict-access/",
label: "Restrict access to multiple posts in bulk.",
}}
  link3={{
url: "/website-builder/video-content/restrict-access-to-video-content/",
label: "Restrict access to video content.",
}}
/>