How to Install and Set up The Qboid Module
How to install and set-up he Qboid module WordPress plugin for Divi.
Install and Set-up of the Qboid Module couldn’t be easier and is simply a case of installing the Qboid plugin just like any other WordPress plugin and uploading one template file to your child theme via ftp.
Once the plug-in has been installed and activated the Qboid Module will be visible in the Divi Builder in the Fullwidth Sections. From there, it’s just a case of editing the usual Divi settings; much the same as the settings for the full-width slider module, with just a few differences.
We hope you enjoy the Qboid Module as much as we have creating it and we look forward to creating more interesting Divi Modules in the future.
1: Install and activate the Divi parent theme.
Qboid is a Module for the excellent Divi Theme by 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.
3: Creating Your Main 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.
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.
3.2: Activate The Divi Builder
Activate the Divi Page Builder by clicking the Use The Divi Builder button located under your page title.
Add a fullwidth section to the builder and delete the default builder standard section. Click the Insert Module(s) + button to open the Module Selector modal box.
Choose the Fullwidth Qboid Module to add it to your Section.
3.3: The Qboid Module Settings
You should now see the Fullwidth Qboid Module Settings in the builder.
Click the Add New Fullwidth Qboid Item to enter the settings for your first Qboid Side.
4: The Qboid Module Item Settings
4.1: Header Text and Buttons
Just as you would with the Divi Fullwdith Slider Module, enter the Heading for your first Qboid Side.
If you wish to use a Button on your Qboid Side, enter the text in the Button Text: input box.
If you want the button to rotate the Qbiod to the next side leave the URL field blank otherwise enter the URL for your link in the URL field. You can select the Button Link Target to _self or _blank for the URL field to open in the same tab or a new tab respectively.
4.2: Background Image
Add or Upload A Full Page Background Image to the Slide/Qboid Side.
NOTE: For best results we try to use images that are no bigger than 1920px x 1080px and optimised for web use at 72dpi.
Resource TIp: We recommend Librestock as a resource for free images
4.3: Background Image Settings
Set Background Image Position as desired. Remember to allow for smaller screen sizes.
Set Background Image Size. We recommend ‘cover’ for best results depending on the image you use.
The Background Color setting is not required when you use a background image but if you want a background color instead of an image this can be effective too.
4.5: Qboid Side Images
You can upload or add a Qboid Side image for each side of the Qboid Module. Your image will appear on the left of your Header and Description Text this can currently only be altered with custom CSS so the Slide Image Vertical Alignment: setting should be left unchanged.
We have set a max-width of 400px for the slide images but this can easily be altered in the Custom CSS settings.
NOTE: For optimal loading and performance we recommend using images that are no larger than the max-width setting of 400px or whatever you have changed it to in the Custom CSS settings.
Resource TIp: For Images with transparent backgrounds we recommend Billion Photos. Please note this is not a free image resource but we believe it is fairly priced.
5: Extra Settings
The Side Video Input box works the same as in the usual Fullwidth Slider and like the Side Images above the max-width for videos is set at 400px which can also be changed in the Videos Custom CSS box.
The Content Box
The Content Box, or Editor should be treated the same as any other editor in the Standard Divi Modules.
Some content such as contact form input boxes will require some extra code for them to work. We have found that the input boxes on some contact forms are unable to be selected without some extra code so results may vary depending on the contact form you are using and which fields you are using. We have had success with the Divi Contact Forms, Contact Form 7 and Caldera Forms to date. Please contact us if you have issues with your contact forms and we will do our best to help you get them working.
Custom CSS Settings
Max Width and Vertical Alignment
For your Qboid Content to be vertically centred you can use the flex css property ‘align-items’ in the Custom CSS box for the Side Description Container (the container for the Text and Image or video).
You can also use this box to set the max-width of the Qboid Content. This is the container for the Text and Image or video. By default the width is set at 100% and you can easily change this here by setting the max-width: to whatever you want like we have in the code snippet below.
You can simply copy and paste the code snippet above into the Custom CSS Box for the Side Description Container to vertically centre your content and set a maximum width of 80%.
Column Widths using Flex
By default the Image/Video and the Text Editor Content use 50% width each using CSS Flex. If you are new to Flex this is set by giving each a property of flex:1; which tells the browser that both containers are of equal width and will take up half of the available space each.
You can change this setting by sing 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 which has a default setting of flex:1;
For another example, let’s say this time you have a Video or Image and only a small amount of text in the editor. For this you might want to give the image or video three quarters of the width. Again, we only need to input our code shown below into either the Side Video or Side Image Custom CSS Box.
Setting the flex property to 3 means that the Image or 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.
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.