How to advance your Creator Profile's styling and design
Below are the common classes you may encounter for their respective elements, in the event you want to make changes while editing your Creator Profile.
Here's a list of CSS classes that you can target to make customization easy (all classes are the same across all templates) for different pages of your site:
Site-wide
Site-wide CSS classes will cause updates across all of the pages you have on your Creator Profile.
List of CSS classes
List of CSS classes
Page
This will apply to all pages you have of your Creator Profile.
.page { css goes here }Page-[type]
This will apply to specific pages you have in your Creator Profile. In order, it'll update the newsletter posts page, links page, Recommendations page, and the products page.
.page-posts { css goes here }
.page-links { css goes here }
.page-recommendations { css goes here }
.page-products { css goes here }Header
This targets the section that includes the creator name, creator byline, creator bio, and the email capture form.
.header { css goes here }Creator name
This targets the first text header.
.creator-name { css goes here }Creator byline
This targets the second text header.
.creator-byline { css goes here }Creator bio
This targets the text paragraph in the header.
.creator-bio { css goes here }Creator avatar
This targets the image icon in the header.
.creator-avatar { css goes here }Subscribe form
This targets the email form on the main Creator Profile page and the email pop-up forms on individual posts pages.
.subscribe-form { css goes here }Subscribe button
This targets the button of the email form on the main Creator Profile page and the button of the email pop-up forms on individual posts pages.
.subscribe-button { css goes here }Navigation
This targets the navigation menu.
.navigation { css goes here }Footer
This targets the footer.
.form { css goes here }Share button
This targets the X, Facebook, and email contact buttons on the bottom left of each page.
.share-button { css goes here }Social shares
This targets the section that includes X, Facebook, and email contact buttons on the bottom left of each page.
.share-buttons { css goes here }
Posts page
Customize the way your posts show up on your Creator Profile.
List of CSS classes
List of CSS classes
Featured post
This targets the featured post on the Creator Profile.
.post-featured { css goes here }Featured post badge
This targets the badge that says "featured post".
.post-featured-badge { css goes here }Locked post badge
This targets the locked post badge.
.post-locked-badge { css goes here }Posts section
This targets the whole section where all the posts are displayed.
.posts { css goes here }Posts
This targets the individual posts that are displayed.
.post { css goes here }Title post
This targets the title of each posts that is displayed.
.post-title { css goes here }Preview text
This targets the preview description of each post that is displayed.
.post-intro { css goes here }Post thumbnail
This targets the thumbnail images of each post that is displayed.
.post-thumbnail { css goes here }Post details
This targets the section of the posts' details that include the "Read now" button, when it was posted, and time it takes to read it.
.post-meta { css goes here }
Single post page
You can also make specific CSS changes to the individual newsletter posts that are published to the Creator Profile. This is the view when creators are reading the post on web.
List of CSS classes
List of CSS classes
Post container
This targets the container for the entire post, including the content of the post, email capture, and the additional posts.
.post-container { css goes here }Post title
This targets the title of the post.
.post-title { css goes here }Post meta
This targets the posts' details that include the when it was posted, and time it takes to read it. This includes the additional posts' details at the end of the page.
.post-meta { css goes here }Post intro
At the end of the individual post, there's a section of additional posts. This targets the preview description of each post that is displayed.
.post-intro { css goes here }Read more section
This targets the section of additional posts at the end.
.post-preview { css goes here }Email form
This targets the form at the end of the individual post.
.post-subcribe-form { css goes here }Sidebar
This targets the section the sidebar next to the individual post.
.sidebar { css goes here }Back button
This targets the back-arrow button on the individual post.
.back-button { css goes here }Email pop-up
On the side bar, there's a subscribe button. This targets the email form that pop-ups after you hit the subscribe button.
.dialog { css goes here }Email pop-up close button
This targets the "X" close button on the email pop-up
.close-button { css goes here }
Recommendations
Make changes to the Recommendations page of your Creator Profile. You can better highlight the different creators you're recommending!
List of CSS classes
List of CSS classes
Recommendations section
This targets the section where all the Recommendations are displayed.
.recommendations { css goes here }Recommendations header
This targets the header of the Recommendations section.
.recommendations-heading { css goes here }Recommendations description
This targets the description of the Recommendations section.
.recommendations-description { css goes here }Recommendations form
This targets everything in the Recommendations section except the text header and description.
.recommendations-form { css goes here }Recommendations submit
This targets specifically the email field and button at the in the Recommendations section.
.recommendations-submit { css goes here }Recommendations creator
This targets each creator recommendation slot that is displayed.
.recommendation-creator { css goes here }Recommendations sponsored badge
This targets the sponsored badge next to any Paid Recommendations you have.
.recommendation-sponsored { css goes here }Recommendation names
This targets the business or personal brand name of each Recommendation.
.recommendation-name { css goes here }Checkbox
This targets the checkboxes next to each Recommendation.
.recommendations-checkbox { css goes here }
Products
Update your digital storefront on your Creator Profile with more changes that matches your branding.
List of CSS classes
List of CSS classes
Product section
This targets the products section where all the products are displayed.
.product { css goes here }Product
This targets the individual product layouts.
.product { css goes here }Product name
This targets the name of the product displayed.
.product-name { css goes here }Product description
This targets the description of the product displayed.
.product-description { css goes here }Content details
This targets the content details of your product, which typically includes the cost, name of product, description, and button.
.product { css goes here }
Links
Many creators use this page as their link-in-bio on their social media profiles. Make any appropriate updates that might increase clickthroughs to your other content.
List of CSS classes
List of CSS classes
Links section
This targets the links section where all the products are displayed.
.links { css goes here }Links
This targets the individual links that are displayed.
.link { css goes here }Link icon
This targets the image icon next to each individual links that are displayed.
.link-image { css goes here }Link text
This targets the text displayed for each individual links that are displayed.
.product-description { css goes here }Link URL
This targets the link URL if it has been enabled.
.link-url { css goes here }Link description
This targets the link description if it has been enabled and added.
.link-url { css goes here }Link arrow
This targets the arrow next to all the links.
.link-arrow { css goes here }
Custom page
Custom pages are additional pages that you can build from scratch!
List of CSS classes
List of CSS classes
Custom page
This targets the whole section of the custom page
.custom-page { css goes here }