Every element in Weaverse comes with a wide range of styling options.
To illustrate how they work, we will look at a few examples with Image, Button, and Text elements.
It’s important to note that each element come with 02 components: the element itself, and the container containing the element.
Selector
With each element, you have the option to design Normal and Hover states separately.
If you want to add more interactivity to your website, simply edit the Normal State first, then switch to the Hover state to edit how an element looks and behaves when shoppers hover over it.
Let’s take an example: I want my image to have red-colored borders when someone hovers over it.
-
At the Normal state, I leave the styling option as it is.
-
Now I switch to the Hover state and add a red border to the image.
Background
With Background element, you can add background colors to an element, or even add a Background Image to it.
Note that when adding a background image, you also have the option to adjust background size and arrangements.
Background Size: Fit, Fill, Auto
-
Fit: Keep the original size and dimensions of the background image.
-
Fill: Make the background image fill the whole element container.
-
Auto: Automatically enlarged the background image to fit the element’s container.
Background Repeat: Used for Fit option in background size. If you enable “Not Repeat”, then there will be a gap between the background image and Container Border.
Spacing (Padding Margins)
Margin
Margin is the spacing surrounding an element - you can understand it as the space between the selected element and the adjacent element.
Increasing or decreasing the margin will push the selected element further away from other elements.
Padding
Padding is the space within an element - you can understand it as the space between the center of an element and its border. When you increase padding, the content inside the element will be pushed further in, creating more space within the element.
How to edit margins and paddings in batch
By default, you can edit the margins and paddings of each element individually. You can have different values for the top, bottom, left, and right margins.
However, if you want to have the same value top, bottom left and right paddings/margins, simply “link” the values by clicking the chain icon in the upper-right corner of the margins panel (or padding panels).
Change the unit of measure
Weaverse offers you four options for the measurements of your margins and padding. We offer px (pixels), em, and % (of the container).
Typography
Under typography, you can change:
-
Font family: Font family is inherited from the font of your Shopify Theme.
-
Font color and Font size.
-
Text Style: Bold, Underline, Strikethrough
-
Text Alignment.
Border
You can use Border options to add a border to the element itself, or to the container surrounding the element.
Under Border, you can customize:
Border Side: Define which side of the element you want to add a border to. If you want to add a border to all sides, then ignore it. or you can use it creatively to create a box illusion for your element.
Border Style: Define the style of your border - it can be solid, dotted or dashed lines.
Border Width: Adjust the number to increase or decrease the thickness of your border.
Border Color: You can use one color for the entire border. Or if you want each side border to have a different color, simply select Border Side → Select Border Style → Select Color, then repeat.
Border Radius: If you want the element to have a perfect rectangle shape, leave the radius at 100. If you want the border to be rounded, decrease the radius.
Device Visibility
Visibility options are only available when you select the entire container that is having the element.
Under Visibility, you can either make a section visible to all devices, or only visible to mobile users.
Shadow and Effects
Only available to a Text element. Both Box Shadow and Text Shadow have similar styling options.
Here you can adjust:
-
Color options: Define the color of your shadow. The opacity of the shadow can be changed by using the slider bar below the color selector.
-
Horizontal offset (X icon) determines how much of the shadow appears on the side of the element. A negative horizontal offset will create a shadow on the left side of the element. A positive horizontal offset will appear on the right side.
-
Vertical offset (Y icon) determines how much of the shadow appears on the top or bottom of the element. A negative horizontal offset will create a shadow on the top side of the element. A positive horizontal offset will appear on the bottom side.
-
Blur (B icon) softens the edge of the shadow, which can help give it a more natural appearance.
-
Spread (S icon) determines the size of the box shadow. Increasing the spread will cause the shadow to expand outward. Decreasing the spread will pull it back in.
Experimenting with these settings is a great way to see their effects in action and to add depth to your designs.