Getting Started Orphic Theme
You've purchased Orphic Theme and it's installed in your portal... now what?
Before you start building your new website or campaign with Orphic Theme I strongly recommend you do the following:
1. Create a child theme. By creating a child theme you start building you set up a safe environment that can be edited/modified within your HubSpot portal. While still receiving any updates or bug fixes
2. Check out the Orphic documentation. It will get you familiarized with Orphic so you can set up your new pages with ease.
3. Email support@revivalpixel.com for any support related questions. We're happy to help with any problems that arise or if you have any questions.
We’ve put a lot of work into making Orphic a useful tool for building high converting web pages. We think it’s powerful now, but we want to collect some feedback from users to make it even better.
How to create a Child Theme for a Marketplace Theme
By creating a child theme of the Marketplace theme, You can now create one-off changes, custom CSS, JavaScript, and/or modules, while still being able to receive updates through the Marketplace.
You can create a child theme for your marketplace purchased theme or a default HubSpot theme in the Design Manager. When creating a child theme from these assets inside the Design Manager, the following files will be added to your child theme:
- theme.json - this will include the proper extends statement for linking to the parent theme.
- child.css and child.js - this is an empty CSS and JS file. Code added to these files will only affect the child theme. You can customize the name of these files in the advanced options section of the child theme creation wizard.
You will be able to edit the child theme even if the original theme is not editable.
To create a child theme
- In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
- In the left sidebar, navigate to @marketplace > Orphic and right click on the theme and click Create child theme.
- Enter a name for your child theme, choose the location of the theme, and click Create Child Theme.
- If you open the advanced options, you can also customize the name of the child CSS and JS files that are created with your child theme.
- Once your child theme is created, a success message will appear telling your child theme is ready to go. You can now Click Close.
- You should now see your child theme and its contents in the left sidebar.
To make and custom CSS and JS changes use the child.css and child.js files
Editing a child theme
To make custom changes to a file, you'll need to setup the same file structure and file name as in the parent. See the image below for an example on how to override
custom-styles.css
You can customize the styling of your theme - including font, colors, and spacing - in your theme settings. Styles edited here apply to all pages.
- In your HubSpot account, click the settings icon in the main navigation bar.
- In the left sidebar menu, navigate to Website > Themes.
- Select Orphic Theme.
Orphic Theme: Custom CSS
To add custom CSS to the Orphic Theme head to the design manager.
#1: Navigate to the Design Manager
#2 Navigate to the Orphic folder, then the css folder, and look for custom-styles.css
Any CSS added to this file will be includes on every page on your site.
Modules
Orphic has a pattern library of 35+ modules.
- Accordion
- Banner Two Column
- Banner with Image
- Banner with Social Media
- Blog Listings
- Blog Pagination
- Blog Recent
- Button
- Call to Action
- Call to Action with Subscribe
- Carousel
- Counter
- Customer Reviews
- Divider
- Easy Google Maps Embed
- Footer
- Form
- Gallery
- Header
- Heading
- Iconbox
- Image Slideshow
- Inner Banner
- Job Listing
- Lists
- Logo Slider
- Media Elements
- Pillar Jump
- Pricing Card
- Recent Post
- Schedule-a-call
- Social Follow
- Tabbing
- Table
- Team Members
- Testimonials
Revival Pixel Support
For support, please reach out via email to support@revivalpixel.com
We aim to reply within 1 business day.