Create a Stunning FAQ Page for Shopify with PageFly - Part 2
Table of Contents:
- Introduction
- Duplicating the Deathwish Coffee FAQ Page
2.1. Layout Elements
2.2. Duplicating the Accordion
- Adding Content to the Accordion
3.1. Changing Fonts and Colors
3.2. Adding FAQ Content
- Styling the Accordion and Dividers
4.1. Adjusting Padding and Spacing
4.2. Adding Hover Effects
- Adding Image, Heading, and Button Sections
5.1. Inserting Images and Links
5.2. Formatting Headings and Buttons
- Creating a Background Image Section
- Final Touches and Review
Duplicating the Deathwish Coffee FAQ Page
Welcome back! In this video, we will be duplicating the Deathwish Coffee FAQ page. We have already set up our layout elements and duplicated the accordion in the previous video. Now, it's time to add some content and style the page. Let's get started!
Adding Content to the Accordion
In this section, we will be adding content to the accordion we duplicated. We will change the fonts and colors to match the original page, and then fill in the FAQ content.
To match the fonts on the original page, we will be using the Montserrat font, except for the top paragraph which uses Roboto. Simply select each section of the accordion and change the font accordingly.
Next, we will adjust the background color of the accordion. While we won't be able to replicate the exact color-changing functionality of the original page, we can still achieve a similar look. Using a color picker tool like ColorZilla, copy the grayish color from the original accordion and paste it as the background color of our accordion item. Remember to keep the background white for the selected item.
Now, let's start adding the FAQ content. We will be copying and pasting the text from the original accordion items and making necessary modifications. Simply select each accordion item, change the text accordingly, and format the font to Montserrat. Repeat this process for all the FAQ sections, ensuring that your accordion is filled with the desired content.
Styling the Accordion and Dividers
In this section, we will be styling the accordion and adding dividers between each section. First, let's adjust the padding and spacing to match the original page. Select the accordion column and add the desired percentage of padding to the top and sides. Play around with the values until you achieve the desired look.
We will also add a hover effect to the accordion items. Using ColorZilla, copy the color from the original page that appears when an item is hovered over, and apply it as the hover background color of our accordion items.
To separate each section, we will add small dividers. Select the divider element, adjust its size, and then duplicate it between each accordion section.
Adding Image, Heading, and Button Sections
Now, let's move on to adding image, heading, and button sections to our page. We will insert the appropriate images, format the headings, and style the buttons.
Start by saving the images you want to use. Then, insert the images using the appropriate links. Format the headings to match the original page, adjusting the font size and style as necessary.
For the buttons, copy the color from the original page using ColorZilla and apply it as the background color of our buttons. Change the text to match the original page as well.
Creating a Background Image Section
To create a visually appealing background image section, we will insert a background image and add some text over it. Select the section, insert the background image, and adjust the positioning until it looks centered and aligned. Add some padding to the top and sides to achieve the desired spacing.
Format the text to match the original page by changing the font size and color. If necessary, adjust the padding on the column to improve the overall appearance.
Final Touches and Review
Before publishing, make sure to review your page and make any final adjustments. Check for font consistency, padding, spacing, and overall styling to ensure it matches the original page as closely as possible.
Remember to save and publish your page once you are satisfied with the results. Congratulations on duplicating the Deathwish Coffee FAQ page!
Highlights:
- Duplicated the Deathwish Coffee FAQ page layout and accordion
- Filled in the accordion with FAQ content
- Styled the accordion and added dividers between sections
- Added image, heading, and button sections to the page
- Created a visually appealing background image section
- Made final adjustments and reviewed the page for consistency
FAQ:
Q: How do I duplicate the Deathwish Coffee FAQ page layout?
A: Start by setting up the layout elements and duplicating the accordion. Then, follow the step-by-step instructions provided to add content and style the page.
Q: How can I match the fonts and colors of the original page?
A: Use the Montserrat font for the accordion content, except for the top paragraph which should use Roboto. Use a color picker tool like ColorZilla to copy the colors from the original page and paste them in the appropriate sections of your duplicated page.
Q: How do I add content to the accordion?
A: Simply select each accordion item, copy the text from the original page, and paste it into your duplicated accordion. Make any necessary modifications and ensure the font is set to Montserrat.
Q: Can I add dividers between each section of the accordion?
A: Yes, you can add small dividers between each accordion section. Simply duplicate the divider element and place it between the sections.
Q: How do I create a background image section?
A: Select the desired section, insert the background image, and adjust the positioning until it looks centered and aligned. You can also add padding to improve the spacing. Add text over the background image by formatting a heading element.
Q: What are some final touches I should consider before publishing?
A: Review your page for font consistency, padding, spacing, and overall styling. Make any necessary adjustments to ensure that your duplicated page matches the original as closely as possible.
