Tag: row shapes

  • Home
  • /Posts Tagged ' row shapes '

Using Flexishapes

Learn how to use the Flexishapes Element.

FlexiShapes Video

Watch the video on how to create FlexiShapes.

STEP 1.

Ensure that the Visual Composer plugin is installed and active, then Edit or Create a new Page.

Once the page has loaded, if it hasn’t got a title, enter one and then click the Frontend Editor button.

STEP 2.

We’ll first add a Row Element to the page:

  • Click + Add Element
  • Goto the search bar and search Row
  • Click the Row Element
    • STEP 3.

    Change Row stretch Setting Next, we’ll configure the Row Stretch setting, this determines the width of the Flexishape.

  • Edit the row
  • Select the General tab
  • Select Stretch row from the Stretch Row select menu ( Default will limit the Flexishape to the width of your content, any other option will set the Flexishape to full width )

    •  

    STEP 4.

    Add a Background Color to the Row Next we’ll add a Background Color to the row, this will highlight what how the Flexishape manipulates the content within a Row.

  • Cick the Design options tab
  • Add a Background Image or Color e.g. #ffd300
  • In this example, I’m only using a small amount of conent within the Row, therefore we’ll add some Padding to the Top and Bottom of the Row
  • Set the Background Image to Cover the entire Row
  • This part is optional, we can click on the Background Extras tab and enable the Parallax Effect & add a Color Overlay
  • Click Save Settings
    • STEP 5.

    Add Some Content to the Row Next we’ll add some simple content to the Row, this can be anything you like, in this example we’ll add a Text Block.

  • Click the Add Element Icon
  • Use the Search bar to search the Text Block Element > Click the Text Block Element > Add Some Text to the Text Block and click Save Settings > Click the Close button
    • STEP 6.

    Add a Flexishape We’re ready to add a FlexiShape, we’re going to add this below the Text Block as it’s going to be placed at the bottom of the Row.

  • Click the Add Element icon below the Text Block or use the icon highlighted in the diagram above.
  • Use the search bar to search for the FlexiShape element
  • Click to add the FlexiShape
    • STEP 7.

    Configure the FlexiShape Next, we’ll configure the FlexiShape, using the Frontend Editor, you can get creative with the settings to see what works for you.

  • In this example we’ve used the Pointed Inverted Shape
  • We’ve set the Position to the Bottom – this means the FlexiShapes will appear at the bottom of the Row
  • The Color of the shape has been set to #ffffff ( white ) – it’s been set to white because the color below the row is white
  • The Height can be any value you like ( within reason )
  • Once you’re happy with how the FlexiShape looks, click Save changes
  • As you can see from the diagram above, the FlexiShape has manipulated the content within the Row is complete
    • STEP 8.

    Add multiple FlexiShapes We can “Layer” the FlexiShapes to create different effects. In this example we’re going to add a semi-transparent FlexiShape

  • Add another FlexiShape – Placing this FlexiShape below the previous one, we want it to appear beneath the pevious FlexiShape
  • In this example we’ve used another Pointed Inverted Shape
  • The position is set to Bottom
  • This time, we’ll use a sem-transparent yellow instead of white, the color used in this example is: rgba(255,211,0,0.5)
  • We’ll use a bigger Height than the previous FlexiShape this will complete the effect
  • Click Save