Customizing Mythos Frontend

Customizing any page of Mythos theme is easier than you can imagine. With Qubely you can create or customize any page the way you want to. Let’s see how some of the content of Mythos theme was designed with Qubely.

theme was designed with Qubely.

To customize any page with Qubely, you first need to log in to your site. Then go the edit mode of your page. You can do that by going to your WordPress dashboard > Pages > All Pages > Edit.

Since Qubely is a Gutenberg toolkit, you’ll find all the Qubely blocks under the Qubely section. Like below –

Info Box

As the name suggests, the Info Box block is there for presenting a large chunk of information in an eye-pleasing manner, which will not overwhelm the visitors when they first see the content. Rather it will make it more interesting. It’s not that when using Info Box you can only use large content, you can also showcase little blocks of content using Info Box like the following image. Currently, there are 4 predefined layouts.

The setting interchanges with the layouts as you need to choose a layout from the 4 predefined ones. All the content related settings including alignment, typography, or padding come with responsive options. For every layout there’s a call to action button, enabling the button will open up the relevant settings. 

Media: You can use one of the three types of media: icon, image, number. Choosing one will open up their respective settings. But for all types, the common settings are: you can add background color/image for hover and normal state, add border and border shadow. You can also control background size, radius, and spacing for different device types. 

Title: This set of settings controls the title styling. You can set a title tag among h1-h6, change the color, add a separator, or increase/decrease the content spacing. You can take control over the typography setting by turning Typography on. 

Sub Title: Turning it on will let you add a subtitle in the Info Box. You can turn it on if you are in need of a subtitle section. The same set of settings as the Title is available for this section. 

Content: Similarly, you can control the visibility of the body content by turning the Show Content function on/off. The typography option will let you customize the typography settings. You can control the font family, size, weight. The advanced typography feature will let you control the line height, letter spacing, and text transformation. 

Background: The Background is a common set of settings most of the Qubely blocks. You can add a solid or gradient color effect to the background of any particular block from this section. Some sections like Row, allows you to add still image/video to be added as the background. You can also add padding, border style, box-shadow, and radius (global and custom, global let you apply same value around the block whereas custom will let you set different values for different sides like top/bottom for different devices). 

Animation: To make the block more interesting, you can add animation effect. It is disabled by default, to enable this feature, choose an effect from the dropdown list. Currently, there are seven effects to choose from. Once you choose your desired one, then start making modifications as you seem fit. The units are in milliseconds. Note: Duration is how long the animation will run and Dealy is the waiting time before the animation starts loading.

Advanced: This section lets you override the current styling of this particular block.

  • Additional CSS Class: You might need to name a block in order to make custom modifications in the future, this is the field where you define the name.
  • Z – Index: If any of your blocks override another, then you can set a value here, the one with the higher value will appear before the other.
  • Hide on Tablet/Phone: Turn it on to hide this block in your desired device. The change will appear on the frontend.
  • Block Row CSS: In case you need to override current block settings, you can write down your own code followed by {{QUBELY}} to override the current settings.

Portfolio

The Portfolio block is a custom-made block specially built for the Mythos theme. The primary function of this block is to show all the portfolios that are created on the backend.

You can create a portfolio by going to Dashboard > Portfolio > New Portfolio. Once you create a portfolio, that can be shown on the frontend using the Portfolio block.

You can define how many portfolios you want to show at a time using the Number function. You can choose a layout from the predefined ones. You can take control over the columns and enable/disable the filtering (which is basically the portfolio category).

Product Listing

The Product Listing block is another custom made block specifically for the Mythos theme. All the products you create using WooCommerce on the backend can be shown using this block

The block comes with a variety of settings. You can control the number of columns you want to show in the block. You can control the number of products, their category, and the sorting type. You can also apply custom CSS style using the Advanced feature.

Every single element of the Mythos theme is designed using the Qubely blocks – a free Gutenberg toolkit. There are more than 20 blocks to provide you with all the designing needs. It also comes with 120+ ready-to-use sections and layout packs that are continuously increasing their collection.

The documentation for Qubely is available on a separate area of documentation.

Was this helpful?