Moesia

Moesia/Moesia Pro

Thank you for your interest in Moesia! This article aims to help you set up your awesome website using this theme.

Although it works perfectly fine as a stand-alone blog, Moesia is meant to be a business theme, so you'll get the most out of it if you use it in this manner.

Let's see what it's all about.

Contents

  1. Quick Start Guide
  2. Recommended Plugins
  3. Front Page Configuration
  4. Category-based widgets
  5. General Settings
  6. Welcome Area
  7. Blog Options
  8. Single Posts/Pages
  9. Fonts
  10. Front Page Colors
  11. Row styles
  12. Single pages header images
  13. Page templates for Services, Employees and Testimonials
  14. Menu icons
  15. Moesia Extensions
  16. Moesia Pro

1. Quick Start Guide

  1. Download, install and activate the theme.
  2. Install and activate the two plugins recommended by the theme: Page Builder by Site Origin and Types.
  3. Right-click this xml file and save it somewhere on your computer, then go to Toolset > Export/Import and import the file. This step is needed if you intend to use the Services, Testimonials, Clients and Employees blocks.
  4. Optional: import demo content and quickly get your site to look like our demo page. Download this import file and see this video if you need help (depending on your host this might not work from the first try).

See this video if you need help to import the settings file (note that the process is the same for all our themes that use Types):

See this video if you need help to import the demo content:

2. Recommended Plugins

When you activate the theme, you'll notice that it recommends using two plugins: Page Builder by Site Origin and Types. If you plan to use Moesia at its full power, you should install those two plugins.

  • The Page Builder plugin will allow you to easily build or change your front page using the custom front page widgets that we've made for you.
  • The Types plugin is also very important. We believe that your content should belong to you, therefore all custom post types data is being kept in this plugin, so even if you decide to switch themes, your data will stick with you. Furthermore, we've taken care of all the configuration needed for the Types plugin. All you need to do is go to this file, right-click and save it as xml, then go to Types > Import/Export and import the file. If you know what you're doing, you can change any settings for the custom post types using the Types plugin, just don't change the names.
  • Regenerate Thumbnails – although not mentioned when you activate this theme, you should also install and run this plugin to regenerate your thumbnails.
  • Post Type Order – useful if you want to quickly rearrange the order of your custom posts (Services/Employees etc.)

3. Front Page Configuration

This is where things get interesting. We're assuming that you installed and activated the two recommended plugins and that you've imported the settings for Types.

Available blocks:

  1. Services – This block assumes that you`ve already set up some services from the Services tab. Just add them as you would any other post. Use the service title for the title field, add a description in the editor and set up an icon. To see the available icons, follow this link. Copy your desired icon name (e.g. fa-android) and paste it in the icon field. You can also add an image which will get a parallax effect, as you can for most of the section types. Just make sure you upload a big enough image to look good.
  2. Employees – As before, you need to add  your employees as custom post types. Add the name, a short description, a photo from the photo field, employee position, and social profile. All these can be configured from Employees tab.
  3. Social Profile – To use this block, follow the instructions provided inside the widget.
  4. Blockquote – Pretty straightforward here: add a photo, a quote and the quote author. Great to use if you want to display a message to your visitors from your manager or somebody else.
  5. Skills – The Skills block lets you show off your skills to your visitor. Up to five skills are allowed. Add a description and the names and values of your skills.
  6. Facts – The Facts block works pretty much like the Skills block and it provides a great way to show the visitors some more info about your company. Up to four facts are allowed.
  7. Projects – This is another block that requires you to publish some custom post types. Go to the Projects tab and add a project title, a description and a featured image to show up on the front page. The front page will also display the projects images in a lightbox gallery.
  8. Testimonials – Again, you first need to create custom posts for this block. Go to the Testimonials tab and create as many testimonials as you like. The post title will be the clients` name.
  9. Clients – Go to the Clients tab and add logos for your clients or partners using featured images. They will get displayed on the front page in a carousel. Make sure the logo images have the approximately the same height in order for the carousel to look good.
  10. Call to action – Add a short message and a link and title for the call to action button.
  11. Latest news – This block automatically pulls the latest three posts from your blog and displays them on the front page.

4. Category-based widgets

The options shown here are available from Moesia 1.15 and they refer to Services/Testimonials/Employees/Projects widgets. Useful if you want to use the same widget multiple times with different data. You need the latest version of the settings.xml file for this.

5. General Settings

The general settings tab can be reached at Customizer > General. It includes a few useful options, like logo upload, favicon upload, apple touch icon upload, and the ability to turn off the smooth scroller.

6. Welcome Area

The welcome area features a full width&height parallax background. A default image is provided and you can easily change it or remove it from Customizer > Header Image. Also, the welcome area can show a title, a short message, and a call to action button which can link to whatever you want. All of these are optional and can be configured from Customizer > Welcome Area. In the Welcome Area you`ll also find an option to turn off the overlay pattern for the header image, an option to disable the header image on all pages except the front page, and color options for the header elements.

Please note:

  1. Removing the header image will also hide the welcome title, welcome message, and call to action button.
  2. The welcome title and welcome message are not the same with the site title and site description.

7. Blog Options

The blog options tab, found at Customizer > Blog Options, give you the ability to choose between two types of layouts for the blog page: posts with small featured images (which is the default behaviour), or posts with big featured images. Choose the one that best suits your needs.

8. Single Posts/Pages

This tab can be found at Customizer > Single posts/pages. Three options are available here:

  1. featured images on posts: activate it to show your featured images on single posts;
  2. featured images on pages: activate it to show your featured images on pages;
  3. author bio: activate it to display your author bio. Make sure you set up a description of yourself and some social links from your dashboard at Users > Your profile.

9. Fonts

A selection of 20 Google Fonts is available at the moment in Customizer > Fonts. Choose the ones you like for the headings and for the body. The theme defaults are Roboto for the body and Roboto Condensed for the headings.

10. Front Page Colors

This tab can be found at Customizer > Front page colors. Using the settings found there, you can set up a custom color scheme for each of the possible front page sections. Find the section you`re interested in and change the colors to get the results you want.

11. Row styles

The features shown here are available from Moesia 1.14.

12. Single pages header images

The features shown here are available from Moesia 1.14.

Make sure you're using the latest version of the .xml file if you plan to use this feature.

13. Page templates for Services, Employees and Testimonials

The features shown here are available from Moesia 1.14.

Please note: support for menu icons is available from Moesia 1.19. Icons list is here.

15. Moesia Extensions

Want to do more with Moesia? Have a look at our growing list of free extensions.

Moesia Pro

Crelly slider

 

Quick guide:

– Install the plugin from the recommended plugins notice which you get when updating or installing the theme for the first time;

– Create a new slider from the Crelly Slider tab. Note the alias that you enter there.

– Go to Customize > Crelly Slider and check the box to activate it and enter the alias in the input field.

– Be sure to deactivate the theme slider or video header from the Customizer in case you were using them.

– Done -> The slider you created will replace your header image.

Header background video

  • Upload a .mp4 video to your Media Library from Media > Add New. Copy the link for that video.
  • Go to Appearance > Customizer and find  the tab called Video.
  • Activate the video background from the checkbox that you can find there and add the link for your video in the .mp4 field.
  • Save and enjoy!

Slider background slider

  • Go to Appearance > Customizer and find the tab called Slider.
  • Add your images and activate the slider from the checkbox.
  • Save and enjoy!

Important: be sure to activate either the slider or the video background, don't leave them both activated at once.

Disabling the header background on all pages except the front page

For the sake of continuity, the option to disable the header image on all pages except the front page that was found in the free version of Moesia will also be the one that will also disable the video or slider background on all pages but the front page. You can find it in the same place: Appearance > Customizer > Welcome Area.

Contact block

This is a new widget that is meant to be used on the front page only. This is how you would make full use of it:

  • Install the Contact Form 7 plugin, if you don't have it already,
  • Create a new contact form with that plugin (you can use the template we're using in the demo – you can get it from here),
  • Add the Moesia FP: Contact widget to your front page using the Page Builder. Don't mistake it for the Moesia: Contact, that one is for sidebar use,
  • Simply enter your address of your HQ and the ID for your contact form and you're good to go!

Dribbble, Instagram, Flickr blocks

This new blocks can be used on the front page, as well as your sidebar. Configuration is really easy, basically all you need to do is add them and you'll see what you need to do. The Instagram one is a bit more special, meaning that you need to authorize an app in order to pull your images. You'll find the link for that in the widget.

If you plan to use any of these three widgets in a sidebar, simply check the checkbox from inside the widget.

18 comments

  1. Thanks for the reminder Charlie, I’ve skipped the 1st line. It’s the Types plugin that I didn’t export the xml. Btw, I’m having problem if I surf my blog using mobile. The header image is too big and I have to scroll down a lot just to see the page. What can I do?

  2. You could simply hide it for mobiles if you feel that would be better for you. Use the following code in a child theme or in a custom css plugin:

    @media screen and (max-width: 320px) {
    .site-header {
    display: none;
    }
    }

    Also, please use the support forums if you have any other questions.

  3. I cannot add a new thread to the support forum. It shows me logged out until I go to a thread which has already been created. I’m having same problem as Elisha. Viewing demo site on my ipad shows header image fine, but when I apply theme to my site, header image continually zooms in as I try to scroll down. What is different? I haven’t make any CSS or other changes to it yet.

  4. hello can you help me ? this i have to take a theme moesia , but content in Front Page Its no large, can some one help me .. thanks

  5. Hi, I cannot find a way to insert copy (when using the page builder) in a readable color. When using the page builder and inserting text/copy in the Text widget, the text is gray. I would like it to be black, and a little larger. Also, I would like to be able to choose the font. How can I make this happen for all pages I create using the builder? Thanks. … [I created an account to post in the forum, but couldn’t do it. Username for the new account created is “tagore.”]

  6. Hello,

    Basically, only widgets marked with FP have customization options in the Customizer. But you can do what you want fairly easy with some custom CSS. Post a link to your website so I can see exactly what you mean and I’ll be glad to help.

    We have some Google fonts in the Customizer. If you don’t find anything you like, you can install one of the many free plugins available.

    I see that your account is created, so please try to log in again. If you manage to log in, let’s continue this on the forum.

    Vlad

  7. Also, how do I insert the widgets and make my home page look like the demo? My home page currently has the slider (so the top part looks like the demo); and “below the fold,” it looks like a regular blog (With the first blank post that says “Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!”). Thanks, Vlad.

    1. Have you read the documentation right above you? Have a look for Services under the Front Page configuration chapter.

  8. Hi, please, I want to know how to set the text and button over the header and how to centralize the content below each page name. Thanks.

  9. Problem: Main Page/Front Page is not appearing when site url loads
    Simply says, “Nothing Found Here”

    Uploading the xml file is VERY vague and can see how MANY people would be confused by missing this tiny piece of instruction. Note to anyone reading this… you MUST upload an XML file per instructions above or theme will not function and you’ll want to toss it out the window. 😉

    1. 1. The front page thing is most likely not related to the theme. But feel free to use the support forums if you think it is.

      2.
      a. How is the uploading of the xml file vague? It is documented in the first chapter of the documentation.
      b. The theme works perfectly fine if you don’t upload the xml. That’s just the configuration for the Types plugin and contains the custom post types, IF and only IF you want to use them. It has nothing to do with the theme working or not.

  10. UPDATE: I am closing comments on this post. If you have questions about the theme or how it works, please use the support forums. It is much easier for us if support related questions are all in one place. Please make sure you read the documentation carefully first.

Comments are closed.