Cards are a great way to show a lot of information for your readers. It is easy to read, responsive according to your screen and organized.
The Qubely Media Card block offers advanced functionality along with simple to understand features. It will enable you to set the block just the way you want.
Add Another Block Inside The Media Card
Right inside the Qubely Media Card block, you can add another Gutenberg block to make it more functional.
In your Media Card block, you will find a + button. Click on it and you will find all the available Gutenberg blocks that you can add.
The newly added Gutenberg block will have all the customization options so you can customize them just the way you want.
Style
After you add the media card block from the Qubely blocks, the first option you will find for customization is the ability to select a preset style for your media card. There are currently 7 styles you can choose from.
Each of them offers a different style to match your specific needs. So you can rest assured that you are covered.
Card Settings
Here you will find all the configuration options for the “Media Card” block. At first, you will find:
Alignment/Content Position: Set the position of the content to where you want. You can select left, right and middle. Please note, that this differs for each layout, as they offer different designs.
Image Position: Choose the position of the image of the Media Card block.
Text Color: Define from a wide range of colors for your texts. You can also reset the color you set.
Background Color: You can choose the background color of the media card. There are many color options to choose from.
Background Type: This option lets you choose the background type you want to set for your Media Card block. You can choose an image as your background or a gradient type. There is also an option to reset any applied background.
- Background Image: Choose this option to set an image as the background of your Qubely media card block.
- Choose Background Image: Select the background image from your site’s media or upload a new image.
- Parallax: Set a parallax effect for your image. The parallax effect occurs when the background image moves slower than the foreground when scrolling, giving off a 2D effect.
- Advanced Background: This gives you advanced background customization options. Options such as background-position settings, repeat, size.
- Gradient Type: Other than an image you can also set a gradient type as a media card background image.
- Reset: If you don’t want to set any background select this reset option.
Border: Set a border around your Qubely media card. Predefined borders include Solid, Dotted, Dashed and Double.
Card Corner: This slider lets you configure the corner radius of the card. There is a global option to set every corner with the same value or you can select each individual corner with a separate value.
Card Padding: To set the Padding of the card content, you can use the Padding function. The scale can be calibrated between 1 to 200. You can apply the same value to all the corners by choosing the global option whereas selecting the Custom option will let you set a different value for each corner. Also, it’s a responsive feature that means you can apply different values for different device types.
Card Shadow: You can apply shadow to the background using this feature. Enabling the feature will present you with the following options:
Color: Lets you choose the color of the shadow.
X: Lets you define the length of the shadow of X-axis.
Y: Lets you define the length of the shadow of Y-axis.
Blur: Lets you control the blurriness of the shadow.
Spread: Lets you control how far the shadow will spread.
Inset: Enable this feature if you want the shadows to be drawn inside the border, above the background, but below content.
Media Settings
Please note, that these setting options are only available for a few of the layouts designs for the Media Card block.
There are two types of media for the content, you can select for your Media Card block. Image type and video. Both of them offer different types of customization options for your needs.
Image: You can select an image for your block background. You can either select an image from your website’s database or upload a new image. After uploading a media file you can find the advanced options.
- Retina Image: Upload the version of the image that you only want to show on the Retina displays (primary apple devices). It’s optional.
- Alt-Text: Set an alt text for your image using this field. Adding an alt-text to every image is essential since it helps to better perform in SEO.
- Image position according to X & Y: Set the position of the image by setting the X & Y coordinates.
- Spacing: Set the spacing of the image and the text content area.
Video: If you choose the video content as the media type you will find the following options.
- Video Source: Choose your video from a local source or external one.
- Local: You can choose any valid video type file from your website’s database. There is an option to also select the poster for your video separately.
- External: Add the external URL of a video to embed it to your media card block. You can enable the autoplay feature for the video as well as set the spacing between the text content area and video of your Media Card block.
Stack Style
Qubely “Media Card” block also offers styling options for your stack content. Here stack content is defined as the content box area of your media card. Here you will find configuration options such as:
Stack Background: Define the background of your text area box. You can set it as a single color, gradient type or reset any applied color before.
Stack Size: Select the size for the content box area using the slider and set the size of your choice. There is also a manual input option. It is also a responsive feature so you can set different sizes for different types of devices.
Stack Corner: You can define the corner of the content area box using this setting. Set it using the slider or manually. This feature is also responsive.
Stack Padding: To set the Padding of the content, you can use the Padding function. The scale can be calibrated between 0 to 60. You can apply the same value to all the corners by choosing the global option whereas selecting the Custom option will let you set a different value for each corner. Also, it’s a responsive feature that means you can apply different values for different device types.
Stack Box Shadow: You can apply shadow to the content area box using this feature. Enabling the feature will present you with the following options:
- Color: Lets you choose the color of the shadow.
- X: Lets you define the length of the shadow of X-axis.
- Y: Lets you define the length of the shadow of Y-axis.
- Blur: Lets you control the blurriness of the shadow.
- Spread: Lets you control how far the shadow will spread.
Badge
Use the badge to specify a piece of important information. Once enabled you will find all the configuration options you will need to define the badge contents.
Badge Position: Select the position for your badge in the media card block. You can select positions such as above the content title, left-top, right-top, left-bottom, the right-bottom of the image area.
Background Color: Choose the color of the background of the badge. You can set any color from the given color palette. There is also a clear button that reverses any set color.
Text color: Use this setting to set the text color of the badge. The color palette gives you a wide range of options to choose from. If you want to reverse any added color just click on the clear button.
Typography: To change the typography of the text turn on this function and you’ll have the followings:
Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
Font Family: Choose your desired font to use from the list.
Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
Advanced Typography
- Line Height: It’s the difference between lines, adjust it the way you want to.
- Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
- Text Transform: Lets you apply your preferred capitalization formate to the text.
Padding: To set the Padding of the badge, you can use the Padding function. You can apply the same value to all the corners by choosing the global option whereas selecting the Custom option will let you set a different value for each corner. Also, it’s a responsive feature that means you can apply different values for different device types.
Margin: This slider lets you set the margin of the Badge area. You can set the same global value for all sides or set a different value for each side. It’s also responsive so you can set margin value specific to different device types.
Corner: Control the radius of the corner of the Badge area in the media card block. Set the radius with the slider or provide the number manually. There is a global option to set every corner with the same value or you can select each individual corner with a separate value.
Advanced
Animation
To make the block more interesting, you can add an animation effect. It is disabled by default, to enable this feature, choose an effect from the dropdown list. 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. The following effects are currently available.
Fade: Selecting this will animate your “Media Card” with a fading animation.
Slide: Animate your “Media Card” with a sliding animation.
Bounce: If you want to animate your “Media Card” with a bouncing animation then select this.
Zoom: This option will animate your “Media Card” with a Zooming animation.
Flip: Animate your “Media Card” with a Flipping animation using this option.
Fold: Selecting this will animate your “Media Card” with a sliding animation.
Rotate: This will animate your “Media Card” with a rotating animation.
Note: You can control the from which direction the animation will start such as from the center, right, left, up or down. Also, control how many times the animation will repeat. You can also select the duration and the starting delay of the animation which are considered in milliseconds.
Interaction
With the Qubely “Media Card”, you also have control over how people interact with your Qubely block. There are three options that you can control how the interaction works.
Enable Tablet: If you want to enable the interactions for Tablet Handheld product users to enable this to start showing tablet users the image interactions.
Enable Mobile: If you want to enable the interactions for Mobile Handheld product users to enable this to start showing mobile users the image interactions.
Enable Mouse Movement: You can select the way how your interactions work with your mouse movement. There are multiple options once you enable it. You can choose the direction from Direct/Opposite, speed from a scale of 1 to 10, maximum from a scale of 5 to 75.
Live Button: This button will give you “Live experience” on how your interactions work depending on how you set it. Click on it to get an overview.
Advanced
This section lets you override the current styling of this particular block.
Enable Custom Position: If you want to set the “Media Card” to a custom position then simply enable this option. After enabling you will find the following options
From X-axis: Select from the slider what position you want the “Media Card” to be in according to the X-axis. The range limits from -2000 to 2000.
From Y-axis: Select from the slider what position you want the “Media Card” to be in according to the X-axis. The range limits from -2000 to 2000.
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.
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.