Open Forum

 View Only
Expand all | Collapse all

Flex Design Tips You May Not Know

  • 1.  Flex Design Tips You May Not Know

    Posted 04-21-2021 11:50

    Hi, everyone! I'm back with our next edition of Tip of the Week. I hope you've enjoyed the recent week's posts from some of your peers – shout out to @Beline Falzon, @Loretta Peterson, and @DO NOT USE Michele Gebrayel for their awesome contributions and suggestions.

    Today, we are focusing on Flex! Now that many of you have migrated from Classic Registration, or are in the midst of migrating, you may have the hang of the navigation and general enhancements in Flex. What we know sometimes takes getting used to are the many tricks in the Site Designer – specifically when working on your theme or graphics.

    I've polled some of my Client Services colleagues for their favorite design tip they've taught their own clients, and wanted to share below:

    • This is one of the tried and true suggestions from Client Services - make sure that header backgrounds do not include any text, as this can get cut off on mobile devices. Use the text widget instead, so that it stays responsive. One of the key benefits of Flex is the responsive design, so you want to be sure you are aligning with all potential devices through your images (desktop, mobile, tablet).
    • A good tip when looking to add spacing in your pages - use text boxes with hard returns as spacers vs. the actual spacer widget. Client Services has found that sometimes this is great to work with.
    • Focusing on background images - make the sections and widgets transparent, then have an image as the background. This will allow for a really clean and fluid look across all pages of your website and registration.
    • An exciting one for our more skilled designers - use the Code Widget for HTML/Java script. This is still a relatively new widget in Flex, but we understand that many prefer working with HTML and code rather than only the build mode. This offers a perfect medium of having a strong template to work off of in the build mode, but giving you flexibility when you need it for coding and more intricate use.
    • Choose how many columns you'd like within a section and place your widgets within columns rather than side-by-side in one section, as this gives you more control over the spacing for each column. So, instead of just using the default one column section, you can use a two column, three column or 4 column section layout instead. From there, you can even adjust the percentages for 2 and 3 columns if you don't want them to be 50% and 50% or 33%, 33% and 33%.
    • Use gifs on your website to incorporate some movement/motion and make things a little more eye catching! Read more in this Knowledge Base article.

    In addition to the above tips, here are some great resources to check out:


    Questions for You:

    • What is your favorite element of website design in Flex that others should be using, too?
    • What is your go-to resource for Flex website and design (if not already listed here)?

     
    Share your tips, experiences, and suggestions below! #CventTip 

    By the way, if you're interested in being a featured poster for Tip of the Week, feel free to send me a message here or email Communitymanager@cvent.com. We always encourage you to share any insights in the Open Forum, but if you'd like to work with me on a specific topic or product I'd love to partner with you and share out some tips to our community.


    #Flex-Creating/ManagingEvents

    ------------------------------
    Danni Czark
    Senior Associate, Online Community Marketing
    Cvent
    ------------------------------


  • 2.  RE: Flex Design Tips You May Not Know

    Community MVP
    Posted 04-29-2021 10:34
    Hi @Danielle Czark,

    I thought I already replied to this and now can't find the post (argh!). This is a FANTASTIC resource and I've sent the links to the two webinars and of course the graphics cheat sheets to a new Cvent Account holder :-) I already bookmarked the cheat sheets long ago!

    I find that the graphic that shows "what goes where," i.e. exactly where are all the different named design elements (various headers, text, and buttons to which one assigns colors, font types, and font sizes) is very useful. I print it out, along with a screenshot of where I've assigned colors and font types and sizes. And I do this for the Registration Website, the Virtual Attendee Hub, and the Email designer. Very helpful to ensure everything is consistent.

    One trick I showed our new Cvent Account holder yesterday who has an old static website with the last past event's data:
    1. In the browser window, "view source" to see the html code
    2. Search for the term "color"
    3. Save that hexadecimal value - there will often be multiple
    4. Search for the term "font"
    5. Save the type, size, and colors
    6. Search for the string "img" and save the width, height, and source (it will be a filename)

    Squirrel all this away so that you can replicate the font colors, sizes, types, and even reuse images.

    And when my friend said, just yesterday, "I have to have this graphic updated, it has the wrong year and info on it," I told him to just get the graphic WITHOUT any writing since he can add text widgets in front of the image. No more "out of date" images due to text embedded within the image file!

    As for my favorites, I am ALL ABOUT data tags, especially custom data tags. When I have items that might change that aren't baked in as Cvent-included data tags, I make sure that I create event-level data tags so that I can update them on the fly and everything everywhere that references them updates. One and done!

    As for my go-to, it is the aforementioned "guide" to what the headers, etc. are, where they appear, and that way I know what size, color, and font type I am assigning. The old Classic one is here: Changing Colors in Basic Mode. That kind of graphical "what goes where" for Flex is SOOOO helpful!

    ------------------------------
    Brenda Ainsburg
    Channel Program Manager
    brenda.ainsburg@siemens.com
    Siemens Aktiengesellschaft
    United States
    ------------------------------



  • 3.  RE: Flex Design Tips You May Not Know

    Posted 05-03-2021 11:16
    My favorite tip that I am always needing to look up (so I have pinned it for quick reference) is If adding a new line of text in a text box field, you will need to hold down the Shift and Enter buttons on your keyboard at the same time to ensure single-line spacing. Pressing Enter only will add additional spacing.

    OTHERS:

    Flex's Theme Color Defaults and TIPS
    Color 1
    • Website Footer background
    • Table headers
    • Pop-Up Window Header background

    Color 2
    • Alternative Paragraph text
    • Primary Button text
    • Pop-Up Window Body background

    Color 3
    • Table background
    • Pop- Up Window Title
    • Pop-Up Close Button background

    Color 4
    • Header 1 text
    • Header 3 text
    • Main Text
    • Paragraph text - For all themes except Vigor.
    • Fields

    Color 5
    • Website Background
    • Header 2 text
    • Header 4 text
    • Alternative Text
    • Paragraph text - For Vigor theme only.
    • Links
    • Secondary Button text
    • Primary Button background
    • Labels


    ------------------------------
    Chelsea Benge
    Events Software Specialist
    Leading Real Estate Companies Of The World
    ------------------------------



  • 4.  RE: Flex Design Tips You May Not Know

    Posted 05-04-2021 08:49
    Thank you for sharing this @Chelsea Benge!  I was taught the shift return aka a hard return but never thought to share it.  I'm so glad you did.  Thank you for the cheat sheet as well. This is very helpful!​​

    ------------------------------
    Michele Gebrayel
    Corporate Event Manager
    DuCharme, McMillen & Associates, Inc.
    ------------------------------



  • 5.  RE: Flex Design Tips You May Not Know

    Community MVP
    Posted 05-04-2021 09:33
    @Chelsea Benge That is a great reference sheet. Thanks for compiling and sharing with the group. ​

    ------------------------------
    James Rose | Senior Web Developer and Content Management
    Digital Infrastructure
    Office of University Development | University of Michigan
    ------------------------------



  • 6.  RE: Flex Design Tips You May Not Know

    Posted 05-05-2021 08:48
    So helpful Chelsea! Thank you for sharing

    ------------------------------
    Leslie Couturier
    Education Assistant
    Maine Hospital Association
    ------------------------------



  • 7.  RE: Flex Design Tips You May Not Know

    Community MVP
    Posted 05-03-2021 12:39
    Hello, 

    Lots of lovely tips shared by Cvent & users in this thread! One very important tip I'd like to share is about the spacers Dani mentioned: for blind users, the screen readers will read the spacer as empty, but meaningful, which will screw up the flow of the page. I'd recommend against using spacer. Hard line jumps are sometimes not the cleanest either, especially if you're looking for a very specific height effect. My recommendation is to use the top and bottom padding on the widget or section itself to achieve the desired spacing. Much cleaner for accessibility purposes! 

    Cheers,

    ------------------------------
    Béline FALZON
    Conference Program Specialist II
    California Teachers Association
    ------------------------------



  • 8.  RE: Flex Design Tips You May Not Know

    Posted 05-04-2021 09:30
    Thank you for sharing all of these great tips with everyone! You mentioned the Code Widget that I've used to insert tables into my website pages since the normal widgets don't allow for tables. But the issue I have is that I cannot apply the correct advanced fonts within the code widget that we utilize on the rest of the page. Has anyone mastered this that would be willing to show me the code they used to do so?

    ------------------------------
    Jill Campbell
    Cvent Specialist
    Chubb INA Holdings Inc
    ------------------------------



  • 9.  RE: Flex Design Tips You May Not Know

    Posted 05-04-2021 10:33
    Jill - I had the same issue with the font not carrying into my code widget. I contacted support and they added this to my code:

    ​<style>
    @import url("https://www.cvent-assets.com/event-guestside-site/assets/css/styles.prod.master_v8.ab715e298d2828b46a1b.css");
    </style>

    Appreciate the color cheat sheet above!! This will definitely come in handy!

    Thanks

    ------------------------------
    Melissa Williford
    Technology Services Project Manager
    ORAU
    ------------------------------



  • 10.  RE: Flex Design Tips You May Not Know

    Posted 05-04-2021 10:52
    Thank you Melissa! That is perfect! I will try that!

    ------------------------------
    Jill Campbell
    Cvent Specialist
    Chubb INA Holdings Inc
    ------------------------------



  • 11.  RE: Flex Design Tips You May Not Know

    Posted 05-04-2021 20:13
    Quick tip I thought was helpful: Using "Shift" + "Enter" to avoid 1.5 space between lines.

    ------------------------------
    Katie Dreifus
    Employee Experience Manager
    loanDepot
    ------------------------------



  • 12.  RE: Flex Design Tips You May Not Know

    User Group Member
    Posted 05-05-2021 11:03
    I've followed the instructions to add the code widget to a page, and it doesn't show up in my site designer. Is there some setting I have to turn on to enable it? Please help; it's kinda driving me crazy! X-)

    Thank you in advance!

    ------------------------------
    Krysten Bennett
    Communications and Technology Director
    Ohio Veterinary Medical Association
    ------------------------------



  • 13.  RE: Flex Design Tips You May Not Know

    Community MVP
    Posted 05-06-2021 08:49
    Hi Krysten,

    I was also missing the code widget from site designer. I kept thinking I was missing a setting somewhere!  I emailed Cvent and it was a setting that hadn't been turned on from their end and they were able to fix that very quickly for me.

    ------------------------------
    Ginger Swart
    Training Program Coordinator
    Electronic Theatre Controls, Inc.
    ------------------------------