designerrefa.blogg.se

Ufocus card full#
Ufocus card pro#

Pro tip: While all parameters are optional, the shortcode will only produce output if you include either the group or ids parameter.3D Hand Held Scanner - Freestyle3D Objects depth - (optional) OCD HTML source indentation.

constrain - (optional) set to 1 while using a grid to confine output to the content column.

card_class - (optional) add an HTML class to each individual Card.

class - (optional) add an HTML class to the group container.

grid - (optional, only 2-4 are allowed) the number of columns in your grid.

ids - (optional) a comma-separated list of Card IDs to display in the specified order.

group - (optional) a group slug name all Cards in the specified group will be displayed.

You can use the following 7 parameters to create the presentation you want: The Card Group shortcode is the easiest way to output multiple Cards in a grid. This shortcode will output the Card with an ID of 1234, and the resulting HTML will include the card-big class on the Card container. The other two parameters are optional, though you may find the class parameter useful if you want to apply special CSS styles to a Card in a specific context (like on your home page, for example). Note: Whenever you use the shortcode, you’ll need to include an id parameter, or else nothing will display!

depth - (optional) for OCD HTML source indentation.

class - (optional) add an HTML class to the Card output.

id - (required) the ID of the Card you wish to display.

The basic Card shortcode accepts 3 parameters you can use to affect the resulting output: Use the built-in shortcodes to create the perfect presentation! Card Shortcode Simply select Font 1, Font 2, or Font 3 1 from the available dropdown, and BOOM-instant font gratification! To add some visual distinction to your Cards, you might wish to present your titles in a different font. If you want to complement your Card background color or if you simply want to make your Cards stand out from the rest of your design, you can use this option to change the Card text color. Use this option if you want your Cards to have a different background color from the content area of your site.ĭepending on your color selection, it may also be necessary to select a Card Text Color to ensure your Cards are easy to read.

Ufocus card full#

x2* - one full unit of whitespace (default).To keep spacing proportional with the rest of your design, you must select a spatial value from Focus to determine the amount of whitespace in your Cards: This option determines how much whitespace surrounds the text portion of your Cards, which includes the title and the accompanying text that appear beneath the Card image. If you’d like your Cards to have squared-off corners instead, simply select the square option.Īlso, you can change the corner radius by selecting a spatial value from Focus that will determine the degree of rounding: Natural heights: Cards in each row display with their natural heightsīy default, your Cards will have rounded corners to set them apart from other, more basic display items in Focus.Equal heights: Cards in each row display with equal heights.You can specify 2, 3, or 4-column grids when you output Card groups, and you can use the following option to determine how Cards behave within your grids: However, if you’d like to add some kinetics to your presentation, you can select the slightly raised option for an attention-grabbing scaling effect when a visitor interacts with your Cards! Card Grid Display Card Behavior on Hoverīy default, your Cards do not react when a visitor mouses over them. The flat Card style is only suitable if the background color of your Cards differs from the color of your content area. Soft: Larger box shadow for a softening effect.The Focus Cards Box supports 4 basic display styles, and you can see each of these styles in action below: Important! Even if you don’t change any settings, you still need to click the green Save Focus Cards button one time-this will add the necessary CSS to your stylesheet to support Focus Card output. Once you’re on the settings page, you can set the basic options for your Focus Cards, and then you’ll be ready to go! Installation and SettingsĪfter installing and activating the Focus Cards Box, you’ll need to visit the settings page, which you can access two different ways.įirst, from the Boxes menu in your Thesis Admin…Īnd second, from the Focus Cards → Settings item in the WP Admin menu: Focus Cards functionality comes in the form of a Thesis Box that can be added to your Focus-powered WordPress website.