Devcron Platform
DashboardHome
  • Welcome
  • Platform News
    • Recents
      • Devcron Sites Are Now More Accessible
      • This Global Colors Feature Cuts Color Picks by 80% and Ups Scalability
      • Jump Start Your Site Membership by Actively Inviting Members
  • Overview
    • Platform Overview
    • Dashboard and Account
      • Dashboard Overview
      • Site Overview
      • Account Setting
      • Site Comments
      • Statistics and Analytics
  • Professional Website Builder
    • Getting Started
      • Editor Overview
      • Launching Your Site Checklist
      • Row Editor
      • Global Design
      • Global Colors
      • Responsive Tablet
      • Customize Background
      • Edit by Device
      • Switch Views
      • Sidebar Layout for Desktop
      • Global Text
      • Image Picker
      • Manage and Import Content
      • Add Sections
      • Arrange Content
      • Copy and Paste
      • Quick Access
      • Show Hidden Elements
      • Keyboard Shortcuts
      • System Requirements
    • Publishing Site
      • Go Live, Publish, and Set Up Your Domain
      • Purchase a Custom Domain
      • Configure Alternate Domains
      • Unpublish a Site
    • Pages and Popups
      • Pages and Popups
      • Configure a Multi-Language Site
      • Add a Navigation Folder
      • Change Home Page
      • Password Protected Pages
      • Publish a Single Page
    • Membership (New)
      • Add Membership Pages
      • Membership Plans
      • Bulk Invite Members to Membership Sites
    • Header and Footer
      • Headers
      • Header and Expandable Menu
      • Shrinking Headers
      • Footer
    • Content
      • Local Business Schema
      • Image Terms and Licensing
      • Image Size Guidelines
      • Image Editor
      • Add Premium Images (Shutterstock Images)
      • Video Backgrounds
      • Use the Color Picker
    • Connected Data and Dynamic Pages
      • Connected Data
      • Dynamic Pages
      • Collections
      • Internal Collections
      • Airtable Collections
      • Google Sheets Collections
      • External Collections
      • Create Dynamic Pages
      • Connect Your Dynamic Page Widgets
      • Add Lists to Display Dynamic Pages
    • Flex Editor
      • Flex Overview
      • Flex Breakpoints
      • Flex Design Panel
      • Add and Edit Flex Sections
      • Create Overlapping Elements in Flex
      • Flex Alignment and Spacing
    • Personalization Rules
      • Personalization Rules
    • Blog
      • About Blogs
      • Updating an Old Blog to the New Blog Platform
      • Blog Settings
      • Add and Edit Blog Posts
      • Manage Post Settings
      • Import Blog Posts from RSS Feeds
    • Custom Code
      • Custom Code Guidelines
      • Using HTML and Custom Code
      • How Can I Troubleshoot Custom Code?
      • Developer Mode
      • Google Analytics Integration
    • Site Settings
      • Site Settings
      • Site Icons
      • Backup Sites
      • Add SSL or HTTPS
      • Load Site in an iframe
      • Header HTML
      • Set a Default Site Language
      • Facebook Tracking Pixels
      • How to Add Schema Markup to Your Site
      • URL Redirects
      • Privacy Settings
      • Site SEO Settings
      • Introduction to SEO
      • Examples of SEO Keywords and Descriptions
      • IndexNow
      • Fonts Library
      • Security Measures
      • General Data Protection Regulation (GDPR) Compliance Information and Resources
      • The California Consumer Privacy Act of 2018 (CCPA) Compliance Information and Resources
      • Introduction to Core Web Vitals
      • Optimize Your Site for Core Web Vitals
      • Core Web Vitals FAQs
      • Lighthouse and Core Web Vitals Comparison
      • Progressive Web App (PWA)
      • Google Tag Manager Tracking
    • Edit On Mobile
      • Edit On the Go
      • Site Stats on Mobile
      • Use the Dashboard on Mobile
      • Edit Image Widgets on Mobile
      • Edit Image Slider and Photo Gallery Widgets on Mobile
      • Edit Click-to-Call and Click-to-Email on Mobile
      • Select and Add Images on Mobile
      • Link Picker
      • Backup, Publish, Re-publish, and Unpublish on Mobile
      • Edit Sites on a Tablet
  • Widgets
    • Widget Overview
      • Add Widgets
      • Edit Widgets
      • Widget Design
      • Outer and Inner Spacing
      • Inline Editing
      • Add Animations
      • Blog Widgets
    • Basic Widgets
      • Text Editor
      • Title Widgets
      • Button Widget
      • Floating Buttons
      • Breadcrumbs Widget
      • Icon Widgets
      • Table Widget
      • Navigation and Sub-Navigation Links
      • Anchor Tags and Links
      • Text & Image Widget
      • List Widget
      • Accordion Widget
      • Tabs Widget
      • Countdown Widget
      • Copyright Widget
      • Spacer Widget
      • Upload a File
    • Media Widgets
      • Image Widget
      • Photo Gallery Widget
      • Image Slider Widget
      • Video Widget
      • Troubleshooting Video Widget
      • Lottie Animation Widgets
      • Before & After Widget
      • Shape Widgets
      • Audio Widgets
    • Business Widgets
      • Contact Forms
      • Configure a GDPR-Friendly Contact Form
      • Contact Form Responses
      • Contact Form Integrations
      • Contact Form Troubleshooting
      • Zoom Widget
      • Map Widget
      • Google Calendar Widget
      • Click To Call
      • Click to Email
      • Business Hours
      • Multi Location Widget
      • Yelp Reviews
      • Online Scheduling
      • OpenTable Reservation Buttons
      • Restaurant Menus
      • Coupons
      • PayPal Button
    • Social Widgets
      • Instagram Feed
      • Reconnect Instagram Feed
      • Social Icons
      • WhatsApp Widgets
      • Social Share Widgets
      • Twitter Feeds
      • Facebook Feeds
      • Facebook Like Button
      • Facebook Comments
      • Disqus Comments
      • RSS Feeds
Powered by GitBook
On this page
  • Row Design Editor
  • Background Image Slider

Was this helpful?

  1. Professional Website Builder
  2. Getting Started

Row Editor

PreviousLaunching Your Site ChecklistNextGlobal Design

Last updated 2 years ago

Was this helpful?

Use the Row editor to change the row's background color and image, add a border, or adjust the inner and outer spacing of the row. Use rows to organize and arrange the content in your site.

Warning

Before editing rows, create a backup of your site. This ensures that you will be able to restore a previous version of your site if you make a mistake. For more information about backing up your site, see

To configure a row:

  1. Hover over the top left of a row until a row button appears, and click Row. The Row editor appears.

  2. Click the Move row up and Move row down arrows to move the current row up or down.

  3. To open the Row design editor, click Edit Design. For more information, see The Row design editor appears.

  4. Click +Add and select one of the following:

    • Row above. Add a new row above the current row.

    • Row below. Add a new row below the current row.

    • Section. Add a section to the row.

    • Column. Add a column to the row.

    • Inner row. Add a row within the current row.

  5. To clear the inner spacing inside the row, click Clear Padding.

  6. To revert the spacing to what you defined in global spacing, click Revert To Global Spacing.

  7. To add an entrance animation to the row (for example, fade from right, bounce in, zoom in), click Entrance Animation, and select an option.

  8. To save the row as a section, click Save as Section and select to save only the current row, multiple rows, or the full page.

  9. To hide the current row on a specific device (desktop, tablet, mobile), click Hide On Device, and select the device.

  10. To copy the row, click Copy.

  11. To anchor the row to the page or delete an existing anchor, click Set As Anchor or Edit Anchor.

  12. To delete the row, click Delete.

Row Design Editor

To edit the background style or spacing of the row:

  1. Hover over the top left of a row until a row button appears, click Row, and then click Edit Design.

  2. On the Settings tab, you have the following options:

    • Full bleed row. To change the row into a full bleed row, which allows content to span the entire width of the screen, click the Full bleed row toggle. If you choose not to have full bleed rows, the content width is limited to 960px.

  3. On the Style tab, select a use a Background Color, Image, or Video. You have the following options:

    • Color.

      • Select a Background color. Gradient color overrides image, and vice versa.

      • Select a Backdrop filter. Backdrop filters allow you to apply graphical effects such as blurring or color shading to the area behind an element. To see the effect, you must make the element or its background partially transparent since this applies to everything behind the element. Select a Filter Type from the drop down menu, and move the slider to select a Filter value.

      • Click Border to select a border type, and move the slider to set the border width.

      • To add a shadow, click the Shadow toggle, and select a color, type, and position for the shadow.

    • Image.

      • To add an image to the background, click + to open the image picker.

      • Select to have the image display as a Cover, Full image, Tile, or No repeat.

      • To enable parallax scrolling on a background image, click the Parallax scrolling toggle. When this is enabled, background content scrolls more slowly than foreground content.

      • Note

        Parallax scrolling is not an option for the Background Image Slider.

      • Configure the Position, Background overlay, Border, and Shadow for the image.

Background Image Slider

After selecting multiple images in the image picker, click Done. Once the slider is created, select a Slide transition from the drop-down menu, and move the slider to select a Slide speed (seconds).

Any of the other background image options such as Background Overlay, Positioning, and display style can be applied to the slider.

Note

Background Image Sliders can be added to any column as well.

To create a background image slider, select multiple images from the image picker, and see .

Video. Paste the URL of the YouTube, Vimeo or Dailymotion video in the field provided. For more information about video backgrounds, see

Video Backgrounds.
Backup Sites.
Row Design Editor.
Background Image Slider