My FlexBox Sandwich...no tomatos!

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
User avatar
ConsciouSince2017
 
 
Posts: 22
Joined: Fri Apr 13, 2018 8:23 pm

My FlexBox Sandwich...no tomatos!

Post by ConsciouSince2017 » Thu Jul 05, 2018 3:16 am

I cut my teeth with WWB (not literally). Took me a lot of fiddling around with Layers, Grids & FlexBoxes. When I couldn't get what I wanted, I would make a sandwich of flexboxes inside layout grids inside layers. It would work, but I felt I was doing a hack job. Or as my dad says, "..a Mickey Mouse job..." Later, I would discover I just need to read the Help file a little more and practice-practice-practice.

I wanted to share this simple Header + Drop Shadow, for those beginners out there.
NOTE: to streamline future projects, I grouped these layers into a single object and saved it as a Block. Whenever I need it, it's ready-made in my Blocks Library...so handy!

Here it is: :arrow:
To create this kind of header, I have the text and logo/icon inside a FlexBox which is set to 'space-between' and the max width to my liking (800px). Since FlexBox doesn't have drop box effect, I drag-n-drop the FlexBox inside a Layer, which DOES have the blury effect. Voila!

Is this how you would achieve this?
[using WWB v12.5]

Image


Image


Image
Get a sharp & professional voice over mp3 (english & spanish)https://www.fiverr.com/s2/7a75e84018

Post Reply

Who is online

Users browsing this forum: No registered users and 5 guests