Advanced Use of the Qboid Plugin
The Qboid Plugn can also be used without the Module to give you more freedom.
This is a little more involved than using the Module but with the advantage of using Divi’s Modules on the Qboid sides we think it’s worth the extra effort. We’ve included a layout file you can use to get started which contains a main section with the four rows required for the Qboid to work plus an additional six rows which we will explain later for a total of 10 rows.
You should find the layout file in your plugins main .zip file in the Layouts folder
or you can download the file from this site here.
Below, we’ll guide you through the process of using the layout file and setting up the Qboid using the layout instead of the Module to give you a general idea of how the Qbid Layout can used.
You can download and use the same images we used as we progress.
1: Install and activate the Divi parent theme.
Qboid is a Module/Plugin for the excellent Divi Theme available from Elegant Themes.
It will only work with the Divi Theme using the Divi Builder at this time. If you don’t have Divi we highly recommend it.
You can get it here. http://www.elegantthemes.com/
Please Note: the links to Elegant Themes are affiliate links.
2: Install and activate the Qboid Plugin
Extract the qboid.zip file, the ‘layouts’ folder and the qboid_page_template.php file from the main qboid_plugin.zip file to somewhere memorable on your computer. In your WordPress dashboard, select Plugins > Add New > Upload Plugin and choose the the qboid.zip file you extracted form the main QboidPlugin.zip. Alternatively you can use FTP to upload the qboid.zip file into your WordPress Plugins directory. Activate the Qboid Plugin in the WordPress Dashboard.
To prevent the Qboid plugin files from loading on pages where we don’t need it, we’ve set a conditional statement to load them only if the Qboid Page Template is selected in the Page Attribues. For this template to show in your page attributes you need to upload the included qboid_page_template.php file to your child Theme’s root directory (the same place as your style.css). Once the file is uploaded it will appear in the Page Attributes Template drop down when you create or edit a WordPress Page.
2.1: Upload The Layout File
In the WordPress Dashboard, go to Divi > Divi Library and click the Import & Export button at the top of the page.
You should see a modal box titled Portability. Click the Import Tab then the Chose File button.
Locate and select the Qboid Layout file (Primary Qboid Layout.json) in the ‘Layouts’ folder you extracted earlier then click Open.
Back in the Portability Modal click ‘Import Divi Builder Layouts’ and wait for the layout file to load.
Once it’s finished loading the layout file should appear in the library as Primary Qboid Layout.
3: Creating Your Qboid Page
3: Create Your Qboid Page
To create your main Qboid page go to Pages in your WordPress Dashboard and click Add New to add a new page to your theme.
Give your new page a title, something like The Cab Company will do.
3.1: Page Attributes
Select the Qboid Page Template in
Page Attributes > Template Drop Down Menu.
NOTE: If you can’t see the Page Attributes edit box, you may need to enable it in your dashboard by clicking the Screen Options Tab at the top right of the page and checking the box for Page Attributes.
You will also need to make sure the Divi Page Settings Box contains the correct settings for the Page Layout. This should be set to Full Width. Hide Navigation Before Scroll can be left at Default.
3.2: Activate The Divi Builder & Load The Layout File
Activate the Divi Page Builder by clicking the Use The Divi Builder button located under your page title.
Click the Load From Library Tab to open the Load Layout Modal box then click the Add From Library tab. Find the Primary Qboid Layout item and click it’s corresponding ‘Load’ button to load the Layout into your page.
4: The Qboid Layout
4.1: The Qboid Layout
You should now see the Qboid Layout consisting of a single Section with 10 Rows.
The first four Rows have three columns an empty text module in the first column labelled Front, Bottom, Back and Top. These are just to show you what each row is for.
The Second Column has an image Module with a Qboid Logo and a text Module below with the text for each side so when you preview the Page you can see where each side is on the Qboid.
NOTE: The Order of the first Four Rows make up the outside of the Qboid and are required. If you move the position of the first four Rows the labels will not match with the Qboid Sides. They can be moved if you wish to swap one side for another but they must always be the first four rows in the layout.
Have a look at a preview of your page now. It should look like Example 1 below with the exception of the header and footer.
If it doesn’t look like the Example, check your settings and make sure you have the page set up as full-width and the Qboid Page Template selected in the Page Attirubutes.
4.2: The Inside Rows
The next four Rows in the Qboid Layout make up the inside faces of the Qboid. They also have three columns with an empty text module in the first column labelled Inside Front, Inside Bottom, Inside Back and Inside Top. Again these are just to show you what each row is for.
Unlike the first four Rows you can move these anywhere below the first four and it will not affect their position on the Qboid. We recommend keeping them in the same order to avoid confusion.
To view the Inside Faces of the Qboid in a page preview, first click the Hamburger Icon for the First Row (Front) then click the Advnaced Design Settings tab. Clear the Background Color and click Save & Exit. Then Delete the Image and Text Module in the Center Column of the same Row.
Now we have a Qboid with nothing on the Front Face allowing us to view the inside of the Qboid.
Scroll down and click the Hamburger Icon for each of the Rows for the Inside Bottom, Inside Top and Inside Back Rows.
In the Advanced Design Settings give the three Inside Rows a background color of solid white and remove the Text Module in the centre Column of the Inside Front Row.
Now click the Preview Button to preview the page. It should now look like Example 2 below.
In this example you can see the Inside Bottom, Inside Top and Inside Back of the Qboid as well as the Inside Left and Right. The Ousides of the Left and Right are never visible so we don’t need settings for those.
4.3: Background Images
You can easily add background images to any side of the Qboid, inside and out. Lets start by adding a Background Image to the Inside Back.
Click the Hamgburger Icon for the Inside Back Row then click the Advanced Design Settings tab. Click the Upload an Image button to add your background image.
For this example we’re using the Boat at Sea image on the left which we found on Pixabay through Librestock so feel free to make a copy though we have made this one smaller at 1500px wide and optiised it for the web.
Once you’ve added your background image click Save & Exit then delete the Text Module in the centre column of the Inside Back Row and preview your page.
4.4: Background Image Layers
Now that we have a background image, lets try something a little more adventurous. We’re going to add the image on the left in front of our existing background image. You’ll have to excuse our dodgy design work on the image, we just cut windows out in photoshop and did a very poor job of it (sorry). To follow along just download the image for yourself. Because it’s a large png image with a transparancy the file size is a lot bigger than our existing background image. You’ll need to take this into account when using multiple images as this can negatively affect your overall page size and loading time.
We could put our image on the front of the Qboid but on tnis occasion we’re going to clone the Inside Back Row by clicking the Clone Row button on the Inside Back row. On the new cloned row, rename the text module in the left column to keep things organised, for this example we renamed our ‘Inside Back Clone’ by changing the Admin Label of the empty Text Module named INSID BACK in the first column. You can do this by right-clicking the empty Text Module’s Hamaburger Menu Icon and selecting rename.
Now, click on the setting menu for the new Row and then the Advanced Design Tab.
We’re going to change the background of this Row to our Cockpit image so Click the Upload an Image button for the background image and upload the cockpit image and set it as the background for this row. Next, change the Background Color to transparent then click on the Custom CSS Tab and scroll down to the Main Element Custom CSS box.
The following line of code sets the position and rotation of the row in the Qboid.
transform: rotateX(360deg) translateZ(calc(-50vh + 1px)) !important;
Note: It must contain !important at the end in order to work.
The property we need to change is the translateZ(calc(-50vh + 1px)) property.
Lets first explain how this piece of code works.
Because the Qboid is a Cuboid and it’s height is 100vh (the viewport height), 100vh, is also the depth of the Qboid. The translateZ property will set the depth of our Row when viewing it face on.
- translateZ(0vh) will set the position of the row directly in the centre of the Qboid.
- translateZ(-50vh) would move the row ‘back’ away from the screen by half the height of the viewport. Because this position matches exatly the position of the outside (Back Face) of the cube we need to bring the row forward a little.
Note: Using calc enables us to bring the Row forward by the smallest amount i.e. 1px so that it sits just inside the outside face of the Qboid without leaving a gap betwen the front and back faces of the Qboid, for extra layers we can safely remove the calc part of the code.
- translate(+50vh) would bring the Row forwards to the exact same position as the outside Front of the Qboid.
For our example, we want our semi-transparent cockpit image to sit a little in front of the Inside Back Row that contains our Sky image. So lets go ahead and change the line of code to the following:
transform: rotateX(360deg) translateZ(-25vh) !important;
This will place our layer directly between the centre and the back of the Qboid. Because of the size of our image we also want to change the background position to the following.
Click Save & Exit and preview your page to view the effect. As you can see, by adding additional layers you can create some interesting 3D effects inside the Qboid. To continue with this example we could add a background image to the inside top of the Qboid because the current white background is visible when you rotate the Qboid. We’ll leave that for you because we have a low attention span and are sure you can come up wth something far more aesthetic. 🙂
5: Using The Divi Modules
5.1: Modules on the Outside of the Qboid
Using Modules on the outisde faces of the Qboid is very easy. It is just like adding Divi Modules although a few of them, along with the standard animations won’t work as they normally would.
This is because some of the modules, and effects start when they scroll into view and the Qboid is effectively always in view with scrolling on the page disabled. You ca still use CSS animations to cteate other effects and if we find a way to start other animations as te Qboid Rotates we will of course bring that feature to a future update.
It’s important to bear in mind however, that animations can serisously affect memory usage. As it stands the Qboid doesn’t take up that much memory but the more you add to it, the more memory willl be used so please use animations and large images with the end user in mind.
You also need to take into account the available screen real-estate because of the limited space using only the viewport to contain the content, especially when using responsive design.
5.2 Using Module’s Inside the Qboid
You can place modules inside the Qboid using the Inside Rows however this does require additional CSS. When you place an interactive module, i.e anything that the user needs to interact with, inside the Qboid it will initially be ‘blocked’ by the content in front of it, even when that content is transparent.
The best way to explain this is using our example layout so lets go ahead and add a Contact Form to our Inside Back Clone we created earlier.
Click the Insert Module button on the middle column of the Cloned Row and add a Contact form Module. Click Save & Exit, there’s no need to edit the form at this point. To make it easier on the eye, you might also like remove the background Cockpit image we added earlier and give the row a background color. You can make it semi-transparent if you like. We’ve done ours in white at 25% opactiy just for the hell of it.
Click Save & Exit when you are done with the Row settings and preview the page with the contact form. As you can see, the contact form does nothing at all. You can’t select the input boxes or click the Form Button.
To fix this we need to adjust the pointer-events property on everything in front of the form. In our example, we have two rows in front of our form. The ‘Front’ Row, and the ‘Inside Front’ row.
We need to add the following code to both rows.
Go ahead and open the settings for the ‘Front’ Row and select the Custom CSS tab. Scroll down to the Main Element and add the line of code above to the Custom CSS; there’s no need to replace the existing code.
5.3: Column Widths using Flex
By default the Image/Video and the Text Editor Content use 50% of the width each using CSS Flex. If you are new to Flex this is set by giving the parent container display:flex; and each column a property of flex:1; which tells the browser that both containers are of equal width so will take up half of the available space each.
You can change this setting using CSS Flex in the Custom CSS boxes for the Side Image, Side Video and the Side Description.
The Side Description Custom CSS is the container for the Title and Content so lets assume you want to give the the Side Description content two thirds of the width and your Side Image one third. To achieve this you only need to add code to the Side Description CSS Box as in the code snippet below:
This tells the browser to give the Side Description twice as much space as the image container whos default setting is flex:1;
For another example, let’s say this time you have a Videoand only a small amount of text in the editor. For this you might want to give the Side Video three quarters of the width. Again, we only need to input our code shown below into the Side Video Custom CSS Box.
Setting the flex property to 3 means that the Side Video container will have 3 times the amount of space than the Side Description.
You can also set a minimum width for the Custom CSS boxes which will effectively set a breakpoint for smaller devices without having to use media queries to achieve the same result. For example you might want to give the text in the example above a minimum width to fill up the screen on smaller devices. If there’s not enough room to fit the minimum width the content will ‘wrap’. For smaller devices you will need to take into account the available height available when content wraps. You may find you need to disable a column in order to fit it on a smaller device.
We can’t really go into every detail of CSS Flex so we have tried to keep the required settings to a minimum for the Qboid Module. We do recommend learning how CSS Flex works for more advanced use of the Qboid Plugin but as always we are happy to help where we can so just give us a shout if you get stuck.
Custom CSS Confusion!
We have fallen victim to this phenomenon whilst creating Qboid designs as well as using the Slider Modules so just as a handy reference here’s a little bit of info detailing which Custom CSS box affects which Element. We’ll start with the obvious and work our way backwards. Not because we’re Japanese but we think this makes it easier to understand.
- Side Image: This affects the Side Image (Simple right?)
- Side Video: This affect the Side Video (Still good?)
- Side Title: This affects the Side Title (oh yes!)
- Side Content: This affects the Content you add with the editor. (Now it gets a little complicated.)
- Side Button: As you’d Expect (easy)
- Side Button Icon: Also as you might expect (easy again)
- Side Button Icon Hover: You got it!
- Side Description: This is the container for the Side Button, Side Content and Side Title (we’re making this too easy!)
- Side Description Container: This is the container for the Side Description and Side Image or Side Video (Even we read that twice)
- Main Element: This contains everything above and you likely won’t need to do anything to this box.