Serendipitous Theme

Thank you for choosing the Serendipitous Theme to build your site. Don’t forget to submit your site when you are finished and please contact us if you run in to any hiccups along the way. Below are the basics on getting your new theme set up to appear like our demo. Here is a link as well to our demo that you can view for reference as you’re setting up your new theme!

VIEW DEMO

* Before Proceeding *

Create a backup of your current site. Always keep an untouched copy of your theme stored on your computer. The original zip file is ideal. You will also want to keep an updated version of your theme files stored on your computer, in the case that you accidentally make a mistake and need to use that copy to fix it. You can also download a copy in your account area at any time. If you would like some help customizing or installing your theme, we offer those service here.

Plug-ins used in the Demo site

Genesis Enews Extended– This is used for the subscribe/newsletter areas.
Simple Social Icons– This is used for the social media icons in the sidebar.
Soliloquy Lite– This is for the slider on the home page.
Genesis Simple Share– This is used for the social media sharing at the bottom of blog posts.
Genesis Featured Content Widget – This allows for custom post types to be featured, not just posts or pages
Portfolio Post Type – Provides the custom post type for your portfolio
WooCommerce– This is used for the ecommerce area of the site. If you aren’t using this feature, don’t install this plugin.
Genesis Connect for WooCommerce– This is used in conjunction with the WooCommerce plugin to work nicely with Genesis.
Instagram Feed– This is used to show your latest Instagram feed.
Regenerate Thumbnails– This is used to recrop your images if all your images are oddly sized.
Widget Importer & Exporter– This is used to import all the widgets from the demo and helps with setting up the theme for the first time.

First Steps

Install the Genesis Framework and make sure it’s activated.
Install the Sassafras Theme and activate it.
Install the plugins listed above before proceeding (leave off any you don’t plan to use).
Reset permalinks. Click “Settings” in your admin menu, then permalinks, and save.
Run the regenerate thumbnails plugin. (tools>regenerate thumbnails)
Install XML file with demo content (only if you feel you need it).
Install the Widget demo file (only if you feel you need it).

If you are starting from a new install you should be able to start editing the demo content with your information. If you have an active site and are switching themes, you may need to do some “cleaning up” and re-arranging of the widgets to have your theme display right.

Your Header Image (logo) or Text:

Image – To add a header image, click “Appearance > Header” and you’ll be prompted to upload your logo. Your logo is retina ready and fully responsive, the optimal size is 1200 x 400. The logo is then compressed to half the original size. This keeps the logo from being fuzzy on mobile devices. The easiest way to properly size the logo is with picmonkey.com or other image editor. Start by creating a canvas the correct size, then place your logo on that canvas and adjust it to fit. Don’t worry about the amount of space on the sides of the canvas, focus more on the height and the logo being centered.

Text – If you prefer to use text, that will automatically appear. You can set your site name by visiting “Settings > General”

Place your blog name in the ‘Site Title’ field
Place your tagline in the ‘Tagline’ field

HOW TO SET UP YOUR WIDGETS:

Your homepage has 9 Widget Areas

Nav Widget Area
Full Width Slider 1200 x 500
Home Call to Action
Home Flexible
Home Portfolio Widget
Home Feature
Footer 1
Footer 2
Footer 3

You also have 3 extra widgets options that show up on single post pages (blogs) and the Portfolio page.

Author Box Widget
After Entry
Portfolio Archive Page Widget

A visual Guide to your widgets

Widgets Used in Demo

If you need additional help setting the widgets up, download and install the Widget Importer & Exporter and upload the Sassafras widget file. This will place and then configure the widgets exactly like the demo, with the demo content. If you don’t have all of the plugins installed used in the demo, you will get a “failed to import” message for the missing plugins.

Theme Customizer

Serendipitous comes with a few options to customize the site. To do this go to Appearance > Customize. From there you can change the colors and background image. Here is a preview of what that screen will look like.

Code References

Slider Captions

Insert Images

Image

Image that links

Buttons

Plain Button

Button with heart

– Change <i class=”fa fa-heart”> to any other Font Awesome Icon

Pricing Table

Font Awesome

The Font Awesome Icon full list of available icons can be found here. The Tutorials can be found here.

If you are unable to find your questions answered in the links above, please contact us and submit a support ticket.

Please note our support team is here to help answer questions pertaining to any Hello You Designs theme setup and installation. Any further customizations to themes is not covered under our provided support.